🐙

React Testing Library Queriesの種類まとめ

2022/10/15に公開約2,300字

現在参画中のプロジェクトにおいて、フロントエンドのテストではReact Testing Library(以下「RTL」)を使用しています。
https://testing-library.com/docs/react-testing-library/intro/
RTLを使用するにあたって、クエリの種類を理解しておくことは必須なので、使用する予定の方は参考にしていただければと思います。

クエリとは

RTLにおいてのクエリとは、ページ上の要素を見つけるために提供されているメソッドです。
クエリの種類には get,query,find があります。
これらの違いは、要素が見つからなかった場合にエラーを投げるか、プロミスを返して再試行するかということです。どのような要素を取得するかによって、どのクエリが適切かを考える必要があります。

クエリの種類まとめ

早速ですが、クエリの種類をまとめた表です。
クエリの種類については、この表を覚えておけば問題なしですね。
(公式ドキュメントの表を日本語に直しただけですがw)

クエリの種類 マッチする要素がない場合 1つの要素がマッチする場合 複数の要素がマッチする場合 リトライの有無 (非同期/待機)
単一要素
getBy... エラー 要素を返す エラー
queryBy... nullを返す 要素を返す エラー
findBy... エラー 要素を返す エラー
複数要素
getAllBy... エラー 配列を返す 配列を返す
queryAllBy... 空の配列を返す 配列を返す 配列を返す
findAllBy... エラー 配列を返す 配列を返す

単一要素

  • getBy...:クエリにマッチするノードを返します。マッチする要素がない場合、あるいはマッチする要素が複数ある場合は、エラーを投げます(複数要素を期待する場合は、代わりにgetAllByを使用します)。
  • queryBy...:クエリにマッチするノードを返します。マッチする要素がない場合はnullを返します。このクエリは存在しない要素をテストするのに便利です。複数要素とする場合はエラーを投げます (複数要素を期待する場合は、代わりにqueryAllByを使用します)。
  • findBy...:クエリにマッチする要素が見つかったときに、Promiseのresolveを返します。要素が見つからない場合、またはデフォルトのタイムアウト1000ms後に複数の要素が見つかった場合は、Promiseはrejectされます。(複数要素を期待する場合は、代わりにfindAllByを使用します)。

複数要素

  • getAllBy...:クエリにマッチするすべてのノードの配列を返します。マッチする要素がない場合はエラーを投げます。
  • queryAllBy...:クエリにマッチするすべてのノードの配列を返します。マッチする要素がない場合は空の配列を返します。
  • findAllBy...:クエリにマッチする要素が見つかったときに、Promiseのresolveを返します。要素が見つからない場合、またはデフォルトのタイムアウト1000ms後に複数の要素が見つかった場合は、Promiseはrejectされます。

ご覧いただきありがとうございます!
この記事が何かの参考になれば幸いです😄

Discussion

ログインするとコメントできます