再実装 React Testing Library

Slide 1

Slide 1 text

しばらくお待ちください

Slide 2

Slide 2 text

私についてりゅーそう埼玉県育ちのエンジニアです。（生まれは千葉なのは内緒...） Saitama.jsの運営しています。埼玉のおすすめ観光地は権現堂の桜です

Slide 3

Slide 3 text

I LOVE 杉戸町「杉戸天然温泉雅楽の湯」は日本一の温泉といっても過言ではない食事は「高橋屋」で鰻コースを予約して優勝です。お子様連れは東武動物公園もあるよ（隣の宮代町だけど...）画像：https://utanoyu.com/より

Slide 4

Slide 4 text

ありがとうございました！（今日はこれを伝えにきました）

Slide 5

Slide 5 text

サンプルのクソアプリ

Slide 6

Slide 6 text

フォームの(一部の) テストをやっていきます

Slide 7

Slide 7 text

再実装 React Testing Library

Slide 8

Slide 8 text

React Testing Library Reactコンポーネントのテストライブラリ https://testing-library.com/docs/react-testing-library/example-intro

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

ASSERTを自作していく💪 https://testing-library.com/docs/react-testing-library/example-intro

Slide 11

Slide 11 text

再実装 React Testing Library ASSERT編

Slide 12

Slide 12 text

DEMO InputWithAlert コンポーネント

Slide 13

Slide 13 text

STEP1:idを使ったテスト

Slide 14

Slide 14 text

STEP1:idを使ったテスト getByIdを作成する・idは一意ではならない・本来は必要のないマークアップ・テスト書きながら、プロダクト独自の値を参照するのがとても辛い

Slide 15

Slide 15 text

STEP2:roleを使ったテスト queryByRoleをつくる・マークアップも改善する・id管理がなくなるなど壊れにくいテストになる・（ロールの知識があれば）暗黙的にテストが書ける

Slide 16

Slide 16 text

STEP3: a11ty assertion aria-invalidをテストします

Slide 17

Slide 17 text

STEP3: a11ty assertion a11tyを関数でテスト・マークアップがa11tyを満たしているかを関数側で担保できる・まとめておくことで一連のinterfation test 的なのが書きやすい（はず...未検証.....）・Headless UIが行っている

Slide 18

Slide 18 text

STEP3: a11ty assertion before after -----act----- https://github.dev/tailwindlabs/headlessui

Slide 19

Slide 19 text

TEST ALL PASS!! LGTM👏👏

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

ライブラリを適切に使っていこう！

Slide 22

Slide 22 text

参考「雅楽の湯公式サイト」 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/

Slide 23

Slide 23 text

おしまい