私は私の構成要素のうちの1つの<code>render</code>方法では、以下のいるリアクトクラスやIDの

Question

を使用していないコンポーネントをテストするために酵素を使用した：」

return <Paper key={insight._id} style={styles[viewMode]}> 
    {cardCover} 

    <div style={styles[viewMode].content}> 
     <div 
     style={styles[viewMode].name} 
     onTouchTap={_ => onClickInsight(insight._id)} 
     > 
     {insight.title} 
     </div> 
     [...] 

酵素は、セレクタを使用して回避しますので、これはと思われる、私の最良の選択肢は、divクラスにput className="something"を使用することです。たとえCSSクラスとして使用していないとしてもです。それ以外の場合は、Material UIのPaperコンポーネント内にdivがいくつあるか把握して、複雑なクエリを使ってXレベルをdivに分けてテストしたいdivに移動します。言うまでもなく、クリック可能なdivを下に移動するか少し上に移動すると、divが技術的にまだレンダリングされていてもクリック可能であってもテストが中断されます。

別の方法がないかぎりですか？

Answer 1

エンザイムはCSSセレクタの上にいくつかのオプションを提供します。 find()React Component Constructorを使用して、まずPaperコンポーネントを見つけてそこからCSSセレクタを使用します。

const myComponent = wrapper.find(Paper);

あなただけのいくつかの子供がonTouchTapセットを持っていることを確認したい場合は、prop syntax CSSセレクタを使用することができます。