酵素：ステートレス機能コンポーネントは未定義の小道具を返します

Question

私は酵素の浅いレンダリングを使用してテストしているSFCを持っています。私はこのステートレスコンポーネントに小道具としてインラインスタイルのスタイルオブジェクトを渡しています。しかし、私はそれにユニットテストを適用すると、それは未定義を返します。私はこのコンポーネントがちょうど小道具として渡されたものを返していることを理解しているので、何も渡されない/レンダリングされて、私に未定義を与えていると私は分かりません。このための回避策はありますか？

const LoginForm = ({ style, handleSubmit }) => { 
    return (
    <form onSubmit={handleSubmit}> 
     <div style={_.get(style, 'container')}> 
     {inputFields} 
     </div> 
    </form> 
); 
}; 

テスト：

it('should apply styles to first div',() => { 
     const wrapper = shallow(<LoginForm style={{display: 'inline'}}/>); 
     expect(wrapper.find('div').first().prop('style')).to.eql({display: 'inline'}); 
     }); 

Answer 1

これが失敗する理由の理由のカップルがあります。

まず、EnzymeシャローラッパーAPIを間違って使用しているようです。

浅いラッパーから特定の小道具を入手する場合は、.props()（換言すれば、 's'を忘れた）を使用する必要があります。

wrapper.find('div').first().props('style') 

しかし、この補正して、あなたのテストはまだ失敗し、あなたのテストでは、あなたはstyle小道具として{display: 'inline'}を渡しているが、あなたはあなたの実装でcontainerというプロパティを探しているからです。 lodash.get（gets the value at the path of an object）を使用していると仮定しています。あなたにもユニットテストコードを投稿できる{display: 'inline'}