テストライブラリにおけるテストID

ライブラリテストケースをテストする際に、通常のセレクターで見つけるのが難しいと判明する何かを問い合わせるときに、オプションに遭遇するかもしれません.
一般的に、他の任意の形式のセレクタを使用できる場合は、テストIDを使用しないでください.
たとえば、イメージ要素の問い合わせをする場合は、findByRoleを使用してください.
テストIDは、要素に追加できる特定の属性です.

<div data-testId="your-unique-key">Some value</div>

心配するな.出力されたコードでこれらをフィルタアウトすることができますので、HTMLには表示されません.

だから、いつテストIDを使用するには？

我々は他の選択肢がないときだけこれらを使用する必要があります.
何か他の何かにテストIDを使用した時間のいくつかの例をあげる.
複数のパスを持つSVG
我々は、内部に複数のパスを持つSVGを持っており、それがアニメーション化されるか変更された色であるならば、我々はコントロールする1つの特定の経路を追跡したいです.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="1">
      <path d="...path" data-testid="path-1" />
    </g>
    <g id="2">
      <path d="...path" data-testid="path-2" />
    </g>
  </defs>
</svg>

ご覧の通り、我々は本当にテストするパスを識別するユニークな方法を持っていません.
さらに多くのパスがあり、いくつかの基準に基づいて動的にレンダリングできます.
次のテストコードでこれらのパスを取得できます.

screen.getByTestId('path-1');
screen.getByTestId('path-2');

クイックリマインダーは、regular query selectorsとgetByに置き換えることができます.
ダイナミックタグ
たとえば、h1にh6をレンダリングできるヘッダーコンポーネントなど、複数の出力をレンダリングできるコンポーネントがあります.
特定の条件に基づいてどの1を描画すべきかを決定するのは難しいかもしれません.これは、このコンポーネントのdata-testidを使用する有効な理由である可能性があります.
タグの複製
これらを使用する別の合理的な時間は、コンポーネントが複数のほぼ同一のタグをレンダリングする場合です.
例えば、2つの非常に同一のボタンを持つことができますが、別のアイコンを使用します.
ここでテストIDを追加することで、両者の間で識別できます.
または、それはあなたのデスクトップのために一度、一度携帯電話用のスパン要素を2回表示することができます.(これは反パターンであるが、まれに起こることもある)
しばしば再発する入力タイプ
場合によっては、ユニークな入力要素を特定するのが非常に難しいフォームをテストしている場合があります.
これは再びテストIDの超有効なケースであるかもしれません.

結論

他のすべてのクエリが失敗した場合にのみ、テストIDを使用します.
彼らはデフォルトに簡単にすることができますが、どのようなユニークなHTMLの作品を作る方法を試してみて、どのように一意に基づいてターゲットにすることができます.
私はあなたのテストIDを使用して聞いて楽しみですか?

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook