reactjs - 当监视从 componentDidMount 调用的组件方法时，永远不会调用 spy

Question

在我的 React 组件中

export default class MyComp extends Component {
  ...
  componentDidMount() {
    this.customFunc();
  }
  customFunc = () => {
    // ..
  }
  ...
}

当我尝试使用 Jest 和 Enzyme 测试此方法时，如下所示:

it('Should call customFunc on mount', () => {
  const MyCompInstance = mount(<MyComp {...props} >).instance();
  const spy = jest.spyOn(MyCompInstance, 'customFunc');

  expect(spy).toHaveBeenCalled();
});

它失败了，预期的模拟函数已被调用，但它没有被调用。

有趣的是，如果我将 console.log() 放入 componentDidMount 和 custsomFunc 中 - 它们就会被调用。我做错了什么？

PS:我在预期之前尝试在实例上使用 forceUpdate，但仍然遇到相同的错误。

Answer 1

it fails with Expected mock function to have been called, but it was not called.

The funny thing is that if I put console.log() in componentDidMount and in custsomFunc - they get called.

调用 mount 渲染组件，并在该过程中调用 componentDidMount，进而调用 customFunc。

然后在 customFunc 上创建 spy，但到那时已经太晚了，因为 componentDidMount 和 customFunc已经作为 mount 的一部分运行，并且测试失败，spy 报告未调用它。

<小时/>

What am I doing wrong?

您需要在调用 customFunc 之前创建spy。

目前的代码编写方式非常困难，因为 customFunc 是作为实例属性实现的。

因为它是一个实例属性，所以在实例存在之前它不会存在，但实例是在渲染过程中创建的，最终调用 componentDidMount。

换句话说，您需要一个实例来监视 customFunc，但 customFunc 在创建实例的过程中被调用。

在这种情况下，检查在 componentDidMount 运行时是否调用 customFunc 的唯一方法是在创建实例后再次调用它并且组件已呈现，这是一种 hack:

import * as React from 'react';
import { mount } from 'enzyme';

class MyComp extends React.Component {
  componentDidMount() {
    this.customFunc();
  }
  customFunc = () => { }  // instance property
  render() { return <div/> }
}

it('Should call customFunc on mount', () => {
  const instance  = mount(<MyComp />).instance();
  const spy = jest.spyOn(instance, 'customFunc');  // spy on customFunc using the instance
  instance.componentDidMount();  // call componentDidMount again...kind of a hack
  expect(spy).toHaveBeenCalled();  // SUCCESS
});

<小时/>

另一种方法是将 customFunc 实现为类方法。

如果 customFunc 是一个类方法，那么它将存在于该类的 prototype 上，这允许您在 customFunc 上创建 spy < em>在 mount 渲染过程中创建实例之前:

import * as React from 'react';
import { mount } from 'enzyme';

class MyComp extends React.Component {
  componentDidMount() {
    this.customFunc();
  }
  customFunc() { }  // class method
  render() { return <div/> }
}

it('Should call customFunc on mount', () => {
  const spy = jest.spyOn(MyComp.prototype, 'customFunc');  // spy on customFunc using the prototype
  const wrapper = mount(<MyComp />);
  expect(spy).toHaveBeenCalled();  // SUCCESS
});