2017-03-23 4 views
0

私はJestとEnzymeを使ってReactコンポーネントをテストしています。時々私は自分自身の上に同じものを入力してfind()を使用しての上に見つけたので、私は次のように私のコードを枯渇しようとした:React Testing:DRYnessの変数に酵素のfind()出力を保存する

反復コード

component.setProps({ something: 'hello' }); 
expect(component.find('SomeField').prop('disabled')).toBe(false); 

component.setProps({ something: 'good' }); 
expect(component.find('SomeField').prop('disabled')).toBe(true); 

component.setProps({ something: 'abc' }); 
expect(component.find('SomeField').prop('disabled')).toBe(false); 

DRY

const someField = component.find('SomeField'); 

component.setProps({ something: 'hello' }); 
expect(someField.prop('disabled')).toBe(false); 

component.setProps({ something: 'good' }); 
expect(someField.prop('disabled')).toBe(true); 

component.setProps({ something: 'abc' }); 
expect(someField.prop('disabled')).toBe(false); 
の試み

与えられるもの:

component = shallow(<MyComponent />); 

ただし、この方法は機能しません。なぜ誰かが説明できますか?さらに、それが可能であれば、誰かがそれを乾燥させる方法を提案することができればうれしいでしょう。

答えて

1

質問は次のとおりです。setPropsはどうなりますか?あなたの反応コンポーネントがブラウザーで何が起こるかと同じですが、小道具が変わるたびにレンダー機能が呼び出されます。 const someField = component.find('SomeField');を使用すると、レンダリングした子コンポーネントの1つを保存しますが、その後にsetPropsを呼び出すと、コンポーネントは新しい子コンポーネントをレンダリングします。したがって、保存されたものは、コンポーネントが何かを変更するものではありません。

私はできるだけシンプルなテストを残すように非ドライ機能をそのまま残すことを提案します。

関連する問題