テストの私は、私は次のことを持っているコンポーネントリアクトための酵素と冗談

Question

とコンポーネントに反応：私はcollection.archivedに異なる値を渡すことによって、テストしようとしていると私はのために確認したい

const ArchiveButton = ({collection, onClick}) => { 

    return (
     <span> 
      { collection.archived && 
      <Button bsStyle="link" onClick={onClick}><i className="fa fa-rotate-left" />&nbsp;Unarchive</Button> 
      } 
      { !collection.archived && 
      <Button bsStyle="link" onClick={onClick}><i className="fa fa-archive" />&nbsp;Archive</Button> 
      } 
     </span> 
    ); 
}; 

を"アーカイブ"と "アーカイブ"というテキストの存在。私はwrapper.find('Button')を行うと.text()に対して試してみて、チェックインすると、それだけで<Button />であり、私はそれをテストする方法を考え出した唯一の方法は次のとおりです。

const wrapper = shallow(<ArchiveButton onClick={onClick} {...props}/>); 

    let button = wrapper.find('Button').prop('children'); 
    expect(button[1]).toMatch(/\sUnarchive/); 

わからしかし、いないビットをオフに思えます。ありがとう！

Answer 1

浅いレンダリングを使用しているため、入れ子になったButtonコンポーネントがレンダリングされないためです。これまで見てきたように、ネストされたコンポーネントのpropsにアクセスして、渡された値をテストすることができます。 ボタンのコンテンツをレンダリングする場合は、代わりに通常のレンダリングを使用します。

ネストされたボタンは通常のDOM要素ではないことに注意してください。浅いレンダリングを使用してもレンダリングされますが、代わりにコンポーネント自体です。

あなたがそれについて考えるなら、あなたのケースで浅いレンダリングを使用しないと、実際にButtonコンポーネントについて何かをアサインしているように、コンポーネントを実際にユニットテストしているわけではありません。浅いレンダリングを使用してネストされたコンポーネントの小道具にアクセスする場合は、実際にコードが正しい引数でButtonコンポーネントを呼び出していることをテストしているだけで、Buttonコンポーネントのレンダリング方法については想定していません。 これは通常、単体テストでやりたいことです。