再実装 React Testing Library

Saitama.js vol.4でのLTです。
React Testing Libraryのassert関数を少しだけ自作してみました。

Transcript

1. しばらくお待ちください
2. 私について りゅーそう 埼玉県育ちのエンジニアです。 （生まれは千葉なのは内緒...） Saitama.jsの運営しています。 埼玉のおすすめ観光地は権現堂の桜 です
3. I LOVE 杉戸町 「杉戸天然温泉 雅楽の湯」は日本一 の温泉といっても過言ではない 食事は「高橋屋」で鰻コースを予約 して優勝です。 お子様連れは東武動物公園もあるよ （隣の宮代町だけど...） 画像：https://utanoyu.com/より
4. ありがとうございました！ （今日はこれを伝えにきました）
5. サンプルのクソアプリ
6. フォームの(一部の) テストをやっていきます
7. 再実装 React Testing Library
8. React Testing Library Reactコンポーネントのテストライブラリ https://testing-library.com/docs/react-testing-library/example-intro
10. ASSERTを自作していく💪 https://testing-library.com/docs/react-testing-library/example-intro
11. 再実装 React Testing Library ASSERT編
12. DEMO InputWithAlert コンポーネント
13. STEP1:idを使ったテスト
14. STEP1:idを使ったテスト getByIdを作成する ・idは一意ではならない ・本来は必要のないマークアップ ・テスト書きながら、プロダクト独自 の値を参照するのがとても辛い
15. STEP2:roleを使ったテスト queryByRoleをつくる ・マークアップも改善する ・id管理がなくなるなど壊れにくいテス トになる ・（ロールの知識があれば）暗黙的にテ ストが書ける
16. STEP3: a11ty assertion aria-invalidをテストします
17. STEP3: a11ty assertion a11tyを関数でテスト ・マークアップがa11tyを満たしているかを関 数側で担保できる ・ まとめておくことで一連のinterfation test 的なのが書きやすい（はず...未検証.....） ・Headless UIが行っている
18. STEP3: a11ty assertion before after -----act----- https://github.dev/tailwindlabs/headlessui
19. TEST ALL PASS!! LGTM👏👏
21. ライブラリを適切に 使っていこう！
22. 参考 「雅楽の湯公式サイト」 https://utanoyu.com/ 「React Testing Library」 https://testing-library.com 「Headless UI GitHub」 https://github.dev/tailwindlabs/headlessui 「Headless UI」 https://headlessui.com 「React Hook Form」 https://react-hook-form.com/advanced-usage/
23. おしまい