使用Jest測試React組件的方法

Question

我有一個容器組件負責為子表單組件方法提供保存功能。 我正在嘗試使用Jest＆Enzyme（我想我需要酶？）來測試子組件是否觸發從父組件傳遞的函數。 這兩種方法看起來像這樣：

 class Parent extends Component { handleSave = (someData) => ( /* do some ajax with someData */ ) render() { return( <ChildComponent {...this.props} handleSave={this.handleSave} /> ) } } class ChildComponent extends Component { render() { <form onSubmit={this.props.handleSave}> <button type="submit">Submit</button> </form> } } 

而且測試：

 import React from 'react' import ParentContainer from '../src/ParentContainer' describe('<ParentContainer />', () => { it('Should fire handle save when PatientScheduler form saves', () => { const component = mount( <ParentContainer />) component.handleSave = jest.fn() component.find('[type="submit"]').simulate('click') expect(component.handleSave).toHaveBeenCalled() }) }) 

我得到的失敗消息是Expected mock function to have been called.

我覺得我90％都在那里。 這有什么不對？ 謝謝。

Answer 1

問題是模擬不是真正觸發click事件而是運行wrapper.prop('click')() 。 形成文檔：

常見的問題

目前，淺渲染器的事件模擬不會像在真實環境中通常所期望的那樣傳播。 因此，必須在具有事件處理程序集的實際節點上調用.simulate() 。

即使名稱暗示這模擬了一個實際的事件， .simulate()實際上會根據你給它的事件來定位組件的prop。 例如， .simulate('click')實際上會獲得onClick prop並調用它。

所以你可以運行component.find('form').simulate('submit')或component.find('form').prop('onSubmit')()