reactjs - 在 React with Enzyme 中测试去抖方法

Question

//Component
import _ from 'lodash';

constructor(props) {
  super(props);
  this.onScroll = _.debounce(::this.onScroll, 100);
}

onScroll() {
  //some code
}

//Test
it('onScroll', () => {
  const component = shallow(<Component />);
  component.instance().onScroll(); //Dosn't call method 
})

我使用 enzyme 作为渲染组件，使用 lodash 来消除抖动。如何调用component.instance().onScroll()？

Answer 1

TL;博士;使用 lolex 及时推进while mocking timers用于测试_.debounce

我准备通过 useFakeTimers 来描述几种用 Jest 来模拟计时器的方法。和advanceTimersByTime 。但没有成功。

一段时间后，我发现它适用于 _.throttle但不是_.debounce 。然后我发现issue reported在 Jest 的仓库中。还有专门的错误报告"_.debounce breaks fake timers"我没有看到它已解决(忽略其状态并检查那里的最后评论)。

根据 veeeery detailed explanation _.debounce不只是把setTimeout还要检查时差。所以我们也应该模拟 Date.now那个 Jest 的jest.runOnlyPendingTimers或jest.advanceTimersByTime不要这样做。

对于像这样的简单组件

function Debounced({onClick}) {
    return <button onClick={_debounce(onClick,500)}>Click Me</button>;  
}

下一个测试已通过:

let clock = lolex.install();
const onClick = jest.fn();
const wrapper = shallow(<Debounced onClick={onClick} />);
const button = wrapper.find('button').at(0);

button.simulate('click');
button.simulate('click');
button.simulate('click');

clock.tick(510);
expect(onClick).toHaveBeenCalledTimes(1);
clock.uninstall();

PS，你肯定可以运行 lolex.install()和clock.uninstall()在beforeEach/afterEach