Jestを使用してReactコンポーネントのメソッドをテストする

Question

子フォームコンポーネントメソッドの保存機能を提供するコンテナコンポーネントがあります。私はJest &酵素（私は酵素が必要だと思いますか？）を使用して、子コンポーネントが親コンポーネントから渡された関数を起動するかどうかをテストしようとしています。二つの方法がそうのようになります。

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

問題は、実際にはクリックイベントを発生させるのではなく、wrapper.prop('click')()を実行することです。ドキュメントを形成する：1が正常に実環境で期待通り

現在

共通の落とし穴

、浅いレンダラのイベントシミュレーションは は反映されません。 の結果として、 イベントハンドラセットを持つ実際のノードで.simulate()を呼び出す必要があります。

実際には 実際のイベントをシミュレートした名前でも、.simulate()は実際に与えたイベントに基づいてコンポーネントの小道具 をターゲットにします。たとえば、.simulate('click')の場合はという具合に実際に を呼び出して呼び出します。

だから、component.find('form').simulate('submit')またはcomponent.find('form').prop('onSubmit')()