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

Question

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

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测试此功能？如果是这样，怎么办？

Answer 1

关键是使用笑话spyOn方法。应该是这样的：

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

如此处所示：测试功能是否被称为反应和酶

请注意 ，最好的做法是在每次测试运行后清除监视功能

let spy

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

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