如何使用 Jest/Enzyme 测试去抖功能？

Question

我有这个组件，测试覆盖率表明我需要测试第 24 行和第 25 行：

class TableToolbarComp extends Component {
  state = {
    shipmentId: '',
  };

  debouncedSetFilters = debounce(() => {
    const { applyFilters } = this.props; // LINE 24
    applyFilters(this.state);            // LINE 25
  }, 750);

  updateShipmentId = ev => {
    this.setState(
      {
        shipmentId: ev.target.value,
      },
      this.debouncedSetFilters,
    );
  };

  render() {...}
}

还有测试：

  beforeEach(() => {
    applyFilters: k => k,
  });

...

  it('should trigger button click', () => {
    const wrapper = shallow(<TableToolbarComp {...props} />);

    wrapper.instance().debouncedSetFilters(750);
    wrapper.instance().updateShipmentId({ target: { shipmentId: '124' } });
    wrapper.instance().props.applyFilters({ shipmentId: '124' });
  });

我没有收到任何错误，它只是说那 2 行需要覆盖。

我已经尝试在测试中调用 debouncedSetFilters 和 applyFilters，但它仍然将这两行作为未覆盖返回。

我错过了什么？

Answer 1

没有间谍就无法有效地测试函数调用。应该是：

  beforeEach(() => {
    applyFilters = jest.fn();
  });

为了测试异步时间敏感功能，应该应用计时器模拟：

jest.useFakeTimers();

const wrapper = shallow(<TableToolbarComp applyFilters={applyFilters} />);

wrapper.instance().debouncedSetFilters();
wrapper.instance().debouncedSetFilters();
expect(applyFilters).not.toHaveBeenCalled();
jest.advanceTimersByTime(750);
expect(applyFilters).toHaveBeenCalledTimes(1);

然后debouncedSetFilters 可以在updateShipmentId 测试中存根。