React-jest-enzyme：コールバックを呼び出す前に別の関数を最初に呼び出す子コンポーネントのテストコール

Question

子コンポーネントのマイボタンがクリックされた後、子コンポーネントに渡されるコールバックが呼び出されます。 .simulate('click')機能を使用して、反応ブートストラップボタン<Button></Button>をシミュレートします。

私のボタンのonClick()関数は、update()という別の関数を呼び出し、その関数が子コンポーネントに渡されたhandleSaveコールバックを呼び出すという問題があります。 <FormControl/>要素のonKeyPress関数も、myコンポーネントの更新関数を呼び出します。ここでは、私は私の子コンポーネントのセットアップを持っているか：私のupdate()機能がcharCode==13から来たかどうかを確認するためのチェックを持っている理由は、それが入力したキーのcharCodeは、またはその両方保存するので、ボタンのクリックです

update(event) {    

     //Have to check to see if the key stroke is the enter key or if it comes from the button click. 
     if(event.charCode === 13 || event.type === 'react-click'){ 

     // Have to use this get the ref value because this.refs.input.value doesn't work. 
     var input = ReactDOM.findDOMNode(this.refs.input); 

     input.value = ''; 
     this.props.handleSave(); 
    } 
} 

render(){ 

    return( 
     <Form> 
     <FormControl type="text" ref="input" onKeyPress={this.update.bind(this)} placeholder="Enter Note" /> 
     <Button onClick={this.update.bind(this)}>Submit </Button> 
     </Form> 
    ) 
} 

<FormControl />

にある情報は、私はこの方法で私のテストのセットアップを持っている：

describe('Input',() => { 

const mockHandleText = jest.fn(); 
const mockHandleSave = jest.fn(); 
const props   = {handleSave: mockHandleSave} 
let input   = shallow(<Input {...props} />); 

    describe('when entering a note',() => { 

    beforeEach(() => { 
      input.find('Button').simulate('click', { 
       charCode: 13 
      }); 
    }); 


    it('adds the note to state',() => { 
     expect(props.handleSave).toHaveBeenCalled(); 
    }); 
    }); 
}); 

奇妙なことは、私はあること.simulate()関数の2番目のパラメータとしてオブジェクトを渡す必要があるということです私はそれが未定義のcharCodeはを読み取ることができないと言って私にエラーを与えるしませんが、オブジェクトを渡す際、オブジェクトでもイベントプロパティを持っている必要はありませんならば、それだけで

expect(jest.fn()).toHaveBeenCalled() Expected mock function to have been called.

を言い、原因

また、いくつかのプロパティを持つオブジェクトを渡さないと、私の要素のonChange関数のコールバックのために持っている他のテストも中断します。わかりやすくするためにコードサンプルから除外し、問題を引き起こしているコードをアップロードしました。私もとでブートストラップ形式を使用しています。完全なコードはgithub.com/Alebron23の私のgithubにあります。

Answer 1

酵素の浅い方法ではDOMツリー全体がレンダリングされず、最も浅いレベルになります。あなたはそれを使って入れ子の子供を見つけることができません。浅いドキュメント（https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md）では、子コンポーネントの動作をアサートする必要がある場合は、shallow（）以外のものを使用する必要があることを議論しています。

render（）を使用するか、render（）が静的で副作用をテストしたいので、代わりにコンポーネント（https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md）を完全にマウントします。