如何使用 Jest 和 Enzyme 对包含 history.push 的反应事件处理程序进行单元测试？

Posted 2023-02-22

【中文标题】如何使用 Jest 和 Enzyme 对包含 history.push 的反应事件处理程序进行单元测试？

【英文标题】：How to unit test a react event handler that contains history.push using Jest and Enzyme?

【发布时间】：2018-11-13 21:58:30

【问题描述】：

给定一个简单的组件：

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 />)
    ...?
  )
)

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

我尝试简单地模拟 onSubmit 处理程序并至少确认它已被调用，但这会导致由于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()

【参考方案1】：

其实很简单，在测试内部进行浅层渲染时，你可以将任何 props 传递给组件，就像这样：const wrapper = shallow(<SearchForm history=historyMock />)

顺便说一下，在onSubmit 内部，你应该像this.props.history.push(...) 这样调用。

现在，要创建一个 mock（更多信息在 documentation），你可以在测试中这样写：const historyMock = push: jest.fn() ;

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

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

【讨论】：

要补充答案，请记住，您可以在浅层渲染组件时传递您想要的任何参数，而不仅仅是模拟。

这需要添加额外的道具并更改我们的目标组件，对吧？

@DamianGreen 不是真的，最终的目标是断言来自对象history 的push 函数被正确调用，history 作为道具传递。