如何使用jest和酶来监视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'])
});

Answer 2

尝试这个：

test('calls `componentWillMount` before rendering', () => {
  const onWillMount = jest.fn();
  SomeComponent.prototype.componentWillMount = onWillMount;
  mount(<SomeComponent />);

  expect(onWillMount).toBeCalled();
});