React Testing Library の Query について整理してみた

Transcript

1. React Testing Library の Query に ついて整理してみた 2022.01.27 フロントエンドLT Vol.1 【オンライン】 @takfjp
2. 自己紹介 Takeru Furuichi (@takfjp) コネヒト株式会社 所属 「ママリ」という出産・育児領域のサービスを開発・運営してい ます フロント: React バックエンド: CakePHP
4. みなさんフロントエンドのテスト 書いてますか？
5. 使っているテストツールは？ Jest / testing-library / cypress etc...
6. 今回は Testing Library のクエリの 使用方法についてまとめてみました
7. testing-library で要素を get する方法 screen.getByXXX -> で要素の有無を判定
8. 使い始めの頃 test-id で要素を get するの楽ちん expect(screen.getByTestId('Hoge')).toBeInTheDocument() 全部これ使えばええやん！
9. そう思っていた時期がありました
10. しかし、優先順位が決められている
11. Queries Accessible to Everyone getByRole ARIA で定められたRole に基づいて要素を特定する Role はHTML 要素(DOM) に結びついているため、目視できるText などよりも確実に要素を取得することに適している アクセシビリティの観点から、全てのユーザーがアクセスできる ように定められているので使用時の優先度が高い button, checkbox, option など getByRole('button', {name: /submit/i}) [submit] というボタンを見つけることができる
12. こんな場合でも使える <h1> Hello <p>World</p> </h1> screen.getByText('Hello World') -> NG screen.getByRole('heading', {name: 'Hello World'}) -> OK
13. Queries Accessible to Everyone 2 getByLabelText フォームフィールドをGet するときに適している。 ユーザーはラベルテキストを頼りにWeb サイトのフォームの要素 を見つけるため、フォームの要素をGet するときに優先されるべ き、とある getByPlaceholderText Label の代わりにはならないが、Placeholder が用意されているな ら特定に使う要素に優先した方がよい
14. getByText <p> <div> <span> などRole を持たない要素の中身を取得したい ときに使う Button に書いてある文言が上記のタグとかぶっていない時にも使 える getByDisplayValue input 要素内に入力されたテキストをGet する時に使う
15. Semantic Queries HTML5 およびARIA 準拠のセレクター getByAltText img, area, input など alt 属性が付与可能な要素を取り出す時に使 用できる 特に img に対して使う頻度が多いのでは？ getByTitle SVG の中に埋め込まれたタイトル要素を使う時に重宝する
16. test-id (getByTestId) getByRole, getByText など用意された手段が全て使えない時の最終 手段 test のためだけに用意された属性であり、セマンティクスの重要性 が低いため濫用することは推奨されていない Role やText で一致できない場合 = <p> タグなどで必ず出現するが、 中身のテキストが動的で常に特定しづらい場合 <p data-test-id="Fetched_Text">{result.text}</p>
17. 雑感 フロントエンドテストを書く時はDOM のセマンティクスやアクセ シビリティも意識して書いていきたい しかし確実に要素の有無を判定したいシチュエーションはまだまだ ある 優先度順に試しつつ適宜 test-id もうまく使っていきたい
18. We're Hiring! https://connehito.com/recruit/
19. Thank you!