unit-testing - 如何使用 Jest 和 enzyme 来监视 componentWillMount

Question

我正在尝试测试 componentWillMount 是否被调用，为此我的测试是

test('calls `componentWillMount` before rendering', () => {
  let fn = jest.fn(SomeComponent.prototype.componentWillMount)
  mount(<SomeComponent />)
  expect(fn).toHaveBeenCalled()
})

但是即使调用了componentWillMount方法，测试也没有通过。我在这里缺少什么？

Answer 1

我不知道其他答案是否对您的问题有所帮助，但您不需要测试 componentWillMount。 React 应该已经为你做了这个测试。

与您的测试更相关的是测试您为组件放入该方法中的功能或操作。

如果您正在进行一些 API 调用、运行基于 props 的函数或其他任何内容，那么您应该进行测试。模拟 componentWillMount 触发的函数/操作/代码，并对其进行断言和期望。

示例:

组件:

class YourComponent extends Component {

  componentWillMount() {
    /*this fetch function is actually what you want to test*/
    this.props.fetch('data')
  }

  render() {
    /* whatever your component renders*/ 
  }    
}

测试:

test('should call fetch when mounted', () => {
  let mockFetch = jest.fn()

  const wrapper = mount(<SomeComponent fetch={mockFetch}/>);

  expect(wrapper).toBeDefined();
  expect(mockFetch).toHaveBeenCalled();
  expect(mockFetch.mock.calls[0]).toEqual(['data'])
});