🐙
React Testing Library Queriesの種類まとめ
現在参画中のプロジェクトにおいて、フロントエンドのテストではReact Testing Library（以下「RTL」）を使用しています。 RTLを使用するにあたって、クエリの種類を理解しておくことは必須なので、使用する予定の方は参考にしていただければと思います。
クエリとは
RTLにおいてのクエリとは、ページ上の要素を見つけるために提供されているメソッドです。
クエリの種類には get,query,find があります。
これらの違いは、要素が見つからなかった場合にエラーを投げるか、プロミスを返して再試行するかということです。どのような要素を取得するかによって、どのクエリが適切かを考える必要があります。
クエリの種類まとめ
早速ですが、クエリの種類をまとめた表です。
クエリの種類については、この表を覚えておけば問題なしですね。
（公式ドキュメントの表を日本語に直しただけですがw）
| クエリの種類 | マッチする要素がない場合 | １つの要素がマッチする場合 | 複数の要素がマッチする場合 | リトライの有無 （非同期／待機） |
|---|---|---|---|---|
| 単一要素 | ||||
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