reactjs - 使用 Jest 和 enzyme 测试自定义 react 方法

Question

我正在尝试测试 react 组件中的方法。该组件是一个表单，它应该测试单击提交按钮时调用的handleSubmit() 方法。我已经尝试过以下方法。

  it('handlesSubmit when submit button is clicked', () => {
    wrapper.find(Button).simulate('click');
    expect(wrapper.instance().handleSubmit).toHaveBeenCalled();
  })

这给出了错误jest.fn()值必须是模拟函数或 spy 。所以我尝试了这个:

it('handlesSubmit when submit button is clicked', () => {
    const handleSubmit = jest.fn();
    wrapper.find(Button).simulate('click');
    expect(handleSubmit).toHaveBeenCalled();
  })

此错误表示预期模拟函数已被调用

Answer 1

第一个 block 失败，因为wrapper.instance().handleSubmit不是一个 Jest 模拟函数；它是类方法定义的任何内容。

第二个 block 失败，因为handleSubmit虽然是一个 Jest 模拟函数，但根本不与您的包装器组件绑定(bind)。它是一个局部变量。当你模拟点击时，它再次调用实际的实现。

为了完成你想做的事情，你必须做这样的事情

it('handlesSubmit when submit button is clicked', () => {
  const handleSubmit = jest.fn();
  WrapperComponent.prototype.handleSubmit = handleSubmit;
  const wrapper = shallow(<WrapperComponent />);
  wrapper.find(Button).simulate('click');
  expect(handleSubmit).toHaveBeenCalled();
})

其中 WrapperComponent 是您正在测试的组件。

上面的方法应该可以工作，但是有时您可以以更好的方式完成类似的事情。根据组件的实现，通常更容易测试调用handleSubmit 方法中的功能而不是调用handleSubmit 方法本身。例如，如果我的组件类似于

class TestComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
    this.onClick = this.onClick.bind(this)
  }

  onClick() {
   this.props.onClick()
   this.setState({ clicked: true })
  }

  render() {
    return (
      <button onClick={ this.onClick }>
        { 'Click Me' }
      </button>
    )
  }
}

我可以通过这样做来测试它

it('calls onClick props and sets clicked state to true when clicked', () => {
  const onClick = jest.fn();
  const testComp = shallow(<TestComponent onClick={ onClick } />);
  wrapper.find('button').simulate('click');
  expect(onClick).toHaveBeenCalled();
  expect(testComp.state('clicked')).toBe(true)
})

我一般更喜欢这种类型的测试，因为我不必覆盖原型(prototype)，而且它实际上是在测试点击是否触发了我期望的逻辑。原始测试实际上只涵盖我将 this.handleSubmit 作为 onClick 属性传递给 Button 组件，仅此而已。