【Reactテスト】getBy～、findBy～、queryBy～の違い、要素の選択の仕方まとめ
1つの要素を選択する3つの方法
getBy～
要素がある場合→一致するノードを返す。
要素がない場合→エラーをthrowする。
findBy～
要素がある場合: 一致するノードのPromiseを返す。
要素がない場合、1000ms以内に見つからな場合: 拒否される。
getByとwaitForを組み合わせたメソッド。よって下記のコードは同じ。
await waitFor(()=> expect(getByRole('button')).toBeInTheDocument())
expect(await findByRole('button')).toBeInTheDocument()
queryBy～
要素がある場合: 一致するノードを返す。
要素がない場合: nullを返す。
要素がない場合getBy～と違ってnullを返すので存在しないノードに対して使うと便利です。
条件によって表示・非表示の切り替えや、一定時間で消えるアラートなどに対して
期待したとおりにノードが消えるかどうかをテストする際に活躍する。
複数の要素を選択する3つの方法
getAllBy～
要素がある場合→一致する配列を返す。
要素がない場合→エラーをthrowする。
findAllBy～
要素がある場合: 一致する配列を返す。
要素がない場合、1000ms以内に見つからな場合: 拒否される。
queryAllBy～
要素がある場合: 一致する配列を返す。
要素がない場合: 空の配列を返す。
要素の選択の仕方
getByText()
非インタラクティブな要素 (div、span、段落など) を見つけるために使用できる。
見つからない場合はエラーを返す。
getByRole()
aria-label属性で要素を取得するのに使用する。利用できないroleを指定すると、
利用可能な全てのroleを表示する。screen.getByRole("")で利用可能なすべてのrollを表示できる。
複数ある要素を(button要素など)指定するには下記のように記述する
getByRole('button', {name: /submit/i})getByLabelText()
for属性の要素を取得するのに使用する。
getByPlaceholderText
placeholder属性の要素を取得するのに使用する。
getByAltText()
alt属性の要素を取得するのに使用する
getByDisplayValue()
value属性の要素を取得するのに使用する。
