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

おしまい