React Componentに酵素を持つhtmlノードが含まれていることをテストする最も簡単な方法は何ですか？

Question

ユニットテストで反応するコンポーネントは、しばしば小道具の存在または内容に基づいて子ノードの存在をチェックします。酵素と

、私は浅いのいずれかに.findを使用して要素を見つけたり、ラッパーをマウントし、その長さはチャイ1.あるかどうかを確認、これは次のようになります。

const wrapper = shallow(<MYReactComponent/>); 
const innerNode = wrapper.find('some-css-selector'); 
expect(innerNode.length).to.equal(1); 

がありますより良い方法のチェック

Answer 1

例のようにセレクタを介して存在をテストしていて、ShallowWrapperを返すメソッドを使用する必要があるとしたら、.lengthを使用する必要があります。しかし、あなたは、必ずしもそれのために別々のステートメントを必要としない。そのことについては

const wrapper = shallow(<MYReactComponent />); 
expect(wrapper.find('some-css-selector').length).to.equal(1); 

をしたい場合は、このような場合には、全体のことを統合できます。

expect(
    shallow(<MYReactComponent />) 
    .find('some-css-selector').length 
).to.equal(1); 

あなたがベースのテストしている場合

const wrapper = shallow(<MYReactComponent />); 
expect(wrapper.contains(
    <div class="something"> 
    <span>content</span> 
    </div> 
)).to.be.true; 

Answer 2

チェックアウトexists()：

コンポーネントタイプに/小道具は、あなたはブール値を返す、を使用することができるかもしれ

expect(wrapper.find(MyComponent).exists()).toEqual(true)