Jest＆Enzymeで反応成分を試験する：成分小胞が与えられたかどうかをテストする場所

Question

Jest &酵素を使用して反応成分の試験を書くとき、成分に特定の小胞が与えられていることを確認する試験が必要ですか？

<App> 
    <Somewhere> 
    <MyNestedComp someProps={someValue} /> 
    </Somewhere> 
</App> 

上記の例では、MyNestedCompにsomeProps propが指定されているかどうかをテストする必要があります。現在、私はそれぞれのコンポーネントをテストしていますが、そのような仕様をどこでテストするかについては時々混乱します。

Answer 1

プロップがコンポーネント自体で使用可能であるかどうかにかかわらず、プロップを渡すコンポーネント自体のテストをまず開始する必要があります。対応するhtmlが正しくレンダリングされます。

酵素の浅いレンダリングを使用して、テストしている特定のコンポーネントに自分自身を限定することができます。

例えば

私はいくつかのHTML要素に表示する渡さ小道具somePropsを使用していますMyNestedCompであるとします。そして、あなたにも、親コンポーネントのテストケースを書くことができます

const wrapper = shallow(<MyNestedComp someProps={"someValue"} />); 
expect(wrapper.html()).to.equal('<div><h1>someValue</h1></div>'); 

あなたの例ではどのSomewhere - MyNestedCompため

const MyNestedComp = ({someProps}) => { 
return (
     <div> 
      <h1>{someProps}</h1> 
     </div> 
) 
} 

ユニットテストは、のように記述することができます。 親コンポーネントの到達範囲から子コンポーネントに正しく渡されたかどうかを確認したり、他の多くのテストケースが可能です。私はそれがあなたの役に立てば幸い

const wrapper = shallow(  
     <Somewhere> 
     <MyNestedComp someProps={someValue} /> 
     </Somewhere> 
); 

const childWrapper = wrapper.find('MyNestedComp'); 
expect(childWrapper).to.have.length(1); 
expect(wrapper.find({someProps: 'someValue'})).to.have.length(1); 

expect(wrapper.prop('someProps')).to.equal("someValue"); 

- としてどこかため

<Somewhere> 
    <MyNestedComp someProps={someValue} /> 
    </Somewhere> 

ユニットテストケースを書くことができます。