javascript – 使用Jest监视componentDidMount中的方法调用

我最近想测试一些自定义方法在React组件的componentDidMount方法中有条件地调用.

componentDidMount() {
  if (this.props.initOpen) {
    this.methodName();
  }
}

我正在使用Jest作为我的测试框架,其中包括针对模拟/间谍的jest.fn().我已经读过,通过做类似以下的事情,用Sinon测试这将是相当微不足道的:

sinon.spy(Component.prototype, "methodName");
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

我正试图用Jest重新创建这个:

Component.prototype.methodName = jest.fn();
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

此代码失败并引发以下错误:

jest.fn() value must be a mock function or spy.
Received:
  function: [Function bound mockConstructor]

是否可以使用Jest测试此功能?如果是这样,怎么样?

解决方法:

关键是使用jest spyOn方法.它应该是这样的:

const spy = jest.spyOn(Component.prototype, 'methodName');
const wrapper = mount(<Component {...props} />);
wrapper.instance().methodName();
expect(spy).toHaveBeenCalled();

如此处所见例如:Test if function is called react and enzyme

请注意,最佳做法是在每次测试运行后清除间谍功能

let spy

afterEach(() => {
  spy.mockClear()
})

https://facebook.github.io/jest/docs/en/jest-object.html#jestclearallmocks

上一篇:javascript – 使用React,react-router,jest和enzyme测试状态更改


下一篇:javascript – 如何使用Jest和Enzyme测试getDerivedStateFromProps