jestと酵素によるカスタム反応メソッドのテスト

Question

反応コンポーネント内のメソッドをテストしようとしています。コンポーネントはフォームであり、送信ボタンをクリックするとhandleSubmit（）メソッドが呼び出されます。私は以下を試しました。 。wrapper.instance（）handleSubmitは冗談モック関数ではないので、最初のブロックに障害が発生したExpected mock function to have been called

Answer 1

言っ

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

このエラー：

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

これは、だから私はこれを試してみましたjest.fn() value must be a mock function or spy.エラーを与えました;それはクラスメソッドがそれを定義するものである。

handleSubmitはjestモック関数ですが、ラッパーコンポーネントにまったく結び付けられていないため、2番目のブロックは失敗します。これはローカル変数です。クリックをシミュレートすると、再び実際の実装が呼び出されます。

あなたがやろうとしているものを達成するために、あなたはWrapperComponentは、あなたがテストしているコンポーネントであるこの

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(); 
}) 

ような何かをしなければなりません。

上記はうまくいくはずですが、場合によってはもっと似たような方法で達成できます。コンポーネントの実装によっては、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) 
}) 

を行うことによって、それをテストすることができクリックが期待するロジックをトリガーすることをテストします。オリジナルのテストでは、実際には、this.handleSubmitをonClick小道具としてButtonコンポーネントに渡しているだけです。