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

Using Jest to spy on method call in componentDidMount

提问by seansean11

I recently wanted to test that some custom method gets conditionally called in the componentDidMountmethod of a React component.

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

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

I'm using Jest as my testing framework, which includes jest.fn()for mocks/spies. I've read that this would be fairly trivial to test with Sinon, by doing something like the following:

我使用 Jest 作为我的测试框架，其中包括jest.fn()模拟/间谍。我已经读过，通过执行以下操作，使用 Sinon 进行测试将相当简单：

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

I'm trying to recreate this with Jest like so:

我正在尝试使用 Jest 重新创建它，如下所示：

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

This code fails and throws the following error:

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

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

Is it possible to test this functionality with Jest? And if so, how?

是否可以使用 Jest 测试此功能？如果是这样，如何？

回答by Jonathan

The key is using jests spyOnmethod. It should be like this:

关键是使用 jestsspyOn方法。应该是这样的：

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

As found here e.g.: Test if function is called react and enzyme

如此处所见，例如：测试函数是否称为反应和酶

Please noteit is also best practice to clear the spied function after each test run

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

let spy

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

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

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

回答by hloughrey

I know its a bit late, but I came across this and would suggest that to test componentDidMountinitiates the call to your nested method that your test should look something like:

我知道它有点晚了，但我遇到了这个，并建议测试componentDidMount启动对您的嵌套方法的调用，您的测试应如下所示：

Module

模块

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

Test - Good

测试 - 好

it('should call methodName during componentDidMount', () => {
    const methodNameFake = jest.spyOn(MyComponent.prototype, 'methodName');
    const wrapper = mount(<MyComponent {...props} />);
    expect(methodNameFake).toHaveBeenCalledTimes(1);
});

If you call componentDidMountthen the assertion that methodNamewas called via componentDidMountis more valid.

如果您调用，componentDidMount那么methodName通过调用调用的断言componentDidMount更有效。

Test - Bad

测试 - 差

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

By writing the test like this - you call the method and then assert that it was called. Which of course it will have given you just called it.

通过像这样编写测试 - 您调用该方法，然后断言它已被调用。这当然会给你打电话。

回答by FrostyDog

If you're trying to test publicmethods being called on componentDidMount(if you're using TypeScript), you'll need to explicitly call the instance's componentDidMountmethod call, since the public methods aren't defined until after the component is instantiated.

如果您尝试测试public被调用的方法componentDidMount（如果您使用的是 TypeScript），则需要显式调用instance的componentDidMount方法调用，因为公共方法直到组件实例化后才定义。

To test something like this:

要测试这样的东西：

Code

代码

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

public methodName = () => {
  // some code here
}

Test

测试

it('should call methodName during componentDidMount', () => {
  const wrapper = mount(<MyComponent {...props} />);
  const instance = wrapper.instance();
  jest.spyOn(instance, 'methodName')
  expect(instance.methodName).toHaveBeenCalled();
});