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 
})

我使用酶作为渲染成分，并使用lodash进行去抖。如何调用component.instance（）。onScroll（）？

Answer 1

您可以在其中返回承诺并断言。

it('onScroll', () => {
    const component = shallow(<Component />);
    return new Promise(resolve=> {
       component.instance().onScroll();
       expect(mockOnScrollFunction).toHaveBeenCalledTimes(1);
       setTimeout(resolve,101);
   }
}

Answer 2

TL; DR;使用lolex提前while mocking timers进行测试_.debounce

我准备用useFakeTimers和advanceTimersByTime描述几种嘲笑计时器的方法。但这没用。

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

根据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();

请确保您可以在lolex.install() / clock.uninstall()中运行beforeEach和afterEach

在React with Enzyme中测试去抖方法

2 个答案: