javascript - 使用 Jest 和 Enzyme 测试 React 组件中的去抖动功能

Question

我正在使用 Jest 和 Enzyme 测试一个 React 组件，并且在测试去抖动函数是否被正确调用(或完全调用)时遇到了困难。我已经简化了下面的组件代码(经过编辑以使代码更简单)，链接到 codepen here

// uses lodash debounce

class MyApp extends React.Component {
  constructor(props) {
    super()
    this.state = {name: "initial value"};
    this.debouncedFunction = _.debounce(this.debouncedFunction, 3000);
    this.handleClick = this.handleClick.bind(this)
  }
  
  debouncedFunction () {
    this.setState({name: "after delay, updated value"});
  }
  
  handleClick() {
    this.debouncedFunction();
  }
  
  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <button onClick={this.handleClick}>
          click for debounced function
        </button>
      </div>
    );
  }
}

我认为去抖功能测试应该与非去抖功能测试非常相似，但使用 setTimeout或 Promise (在 expect 或 .then 中使用 .finally 断言)。在尝试了使用这两种想法的许多测试变体之后，我不再那么确定了。有任何想法吗？

Answer 1

注意 :这个答案也适用于 lodash.throttle 因为它只是 debounce 的包装.
Lodash的 debounce 是一个怪物，需要在测试中进行一些特殊处理，因为它不仅使用 setTimeout()但它也:

Calls setTimeout() recursively : 这意味着调用 jest.runAllTimers()模拟setTimeout会导致无限递归错误，因为mocked setTimeout()同步执行，直到它用完任务，这里不是这种情况。

Uses Date API : Jest v25 及以下版本仅模拟计时器功能(例如 setTimeout , setInterval )而 debounce使用 setTimeout和 Date所以我们需要模拟他们两个。

如何解决此问题取决于您使用的 jest 版本。
对于 jest 版本 25 及以下版本:
使用另一个库模拟 Date目的。在本例中，我将使用 advanceBy()来自 jest-date-mock

jest.useFakeTimers()

await act(async () => {
  triggerDebounced()
  advanceBy(DEBOUNCED_TIME + 1000) // forward Date
  jest.advanceTimersByTime(DEBOUNCED_TIME) // forward setTimeout's timer
})

Jest 版本 26:
开 Jest version 26为模拟两个 Date 的假计时器引入了现代模式和定时器功能，这是一个可选功能，所以要使用它，您需要添加 jest.useFakeTimers('modern')在测试运行之前

jest.useFakeTimers("modern")

await act(async () => {
  triggerDebounced()
  jest.advanceTimersByTime(DEBOUNCED_TIME)
})

开 Jest 版本 27+:
据此 PR , Jest v27 将默认使用现代实现，因此我们不需要明确指定它。

jest.useFakeTimers()

await act(async () => {
  triggerDebounced()
  jest.advanceTimersByTime(DEBOUNCED_TIME)
})