Testing LibraryのWhich query should I use?を訳す

やること

このページを訳するのみ
https://testing-library.com/docs/guide-which-query

guide-which-query?(どのクエリを使うべき？)

鉄則は、ユーザーが使うみたいにテストするってこと。で、おすすめなのは、

1.ユーザーが目印にするものをクエる

i. getByLabelText　:formのlabelがやっぱユーザーが一番目印にするもんだから、一番おすすめ。
ii. getByPlaceholderText : プレースフォルダーは別にlabelの代わりに使うもんじゃないけど、それしかなくて、labelも何もないなら、まぁ他のよりはマシ。
iii. getByText : formには使えねーけど、form以外なら一番おすすめ。ボタンとかね。一番ユーザーが見つける要素だからね。
iiii. getByDisplayValue: form要素の現在の値は、値が入力されたページをナビゲートするときに役立ちます。

2. セマンティックにクエる（ユーザーにはわからんことだけどな）

i. getByAltText : 要素が代替テキスト（img、area、およびinput）をサポートしている場合、これを使用してその要素を見つけることができます。
ii. getByTitle: title属性ってユーザーには見えんけどな。
iii. **getByRole :これを使用して、ダイアログボックスやその他のキャプチャが困難な要素をより意味的な方法で選択できます。

3. Test ID

i. getByTestId : どうしょうもない時はこれ使う。

Manual Queries（手でクエる）

querySelectorで普通にclass名とか取れっけど、ユーザーには見えないんだからあんまやんないでよ。やるならtestidね。

// @testing-library/react
const { container } = render(<MyComponent />)
const foo = container.querySelector('[data-foo="bar"]')