如何使用 Jest 和 Enzyme 对包含 history.push 的反应事件处理程序进行单元测试? [英] How to unit test a react event handler that contains history.push using Jest and Enzyme?

问题描述

给定一个简单的组件:

export default class SearchForm extends Component {
  constructor(props) {
    super(props)
    this.state = { query: '' }
  }
  onSubmit = (event) => {
    event.preventDefault()
    history.push(`/results/${this.state.query}`, { query: this.state.query })
  }
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input
          type="text"
          value={this.state.query}
          onChange={event => this.setState({ query: event.target.value })}
        />
        <button>Search</button>
      </form>
    )
  }
}

和测试:

describe('SearchForm Component', () => {
  it('should navigate to results/query when submitted', () => {
    const wrapper = shallow(<SearchForm />)
    ...?
  })
})

您如何验证表单提交是否将用户带到具有正确查询值的下一页?

How do you verify that form submission is taking the user to the next page with the correct query value?

我尝试简单地模拟 onSubmit 处理程序并至少确认它已被调用，但这会由于 history.push 而导致安全错误.

I've tried simply mocking the onSubmit handler and at least confirming that it's been called, but this results in a security error due to history.push.

const wrapper = shallow(<SearchForm />)
const mockedEvent = { target: {}, preventDefault: () => {} }
const spy = jest.spyOn(wrapper.instance(), 'onSubmit')
wrapper.find('form').simulate('submit', mockedEvent)
expect(spy).toHaveBeenCalled()

推荐答案

其实很简单，你可以在测试内部浅渲染的时候传入任何props给组件，像这样:
const 包装器 = 浅(<SearchForm history={historyMock}/>)

It's actually simple, you can pass in any props to the component when shallow rendering it inside the test, like that:
const wrapper = shallow(<SearchForm history={historyMock} />)

顺便说一下，在onSubmit中，你应该像this.props.history.push(...)那样调用.

By the way, inside onSubmit, you should call like this.props.history.push(...).

现在，创建一个模拟(文档中的更多信息)，你可以在测试中这样写:
const historyMock = { push: jest.fn() };

Now, to create a mock (more info in the documentation), you can write like this in the test:
const historyMock = { push: jest.fn() };

请记住，您实际上只是在模拟 history 对象的 push 方法，如果您在组件内部使用更多方法并想要测试它们，您应该为每个测试创建一个模拟.

Keep in mind that you are actually mocking only the push method of the history object, if you use more methods inside the component and want to test them, you should create a mock to each one tested.

然后，您需要断言 push 模拟被正确调用.为此，您需要编写必要的断言:
expect(historyMock.push.mock.calls[0]).toEqual([ (url string), (state object) ]);
使用需要的 (url string) 和 (state object) 来断言.

And then, you need to assert that the push mock was called correctly. To do that, you write the assertion necessary:
expect(historyMock.push.mock.calls[0]).toEqual([ (url string), (state object) ]);
Use the needed (url string) and (state object) to be asserted.

这篇关于如何使用 Jest 和 Enzyme 对包含 history.push 的反应事件处理程序进行单元测试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！