Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
再実装 React Testing Library
Search
Ryusou
December 07, 2022
Programming
0
210
再実装 React Testing Library
Saitama.js vol.4でのLTです。
React Testing Libraryのassert関数を少しだけ自作してみました。
Ryusou
December 07, 2022
Tweet
Share
More Decks by Ryusou
See All by Ryusou
Astro 3.0入門
nozaki
0
460
Hydrogenで 2022年〜を感じる
nozaki
0
620
microCMSでimgixに入門する
nozaki
0
1.1k
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.3k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.8k
はじめてのUniversal JavaScript
nozaki
1
2.4k
Other Decks in Programming
See All in Programming
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
Constant integer division faster than compiler-generated code
herumi
2
700
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
Infer入門
riru
4
1.6k
RDoc meets YARD
okuramasafumi
2
120
Flutterと Vibe Coding で個人開発!
hyshu
1
270
Namespace and Its Future
tagomoris
4
300
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
600
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
330
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Facilitating Awesome Meetings
lara
55
6.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Designing for Performance
lara
610
69k
Balancing Empowerment & Direction
lara
2
590
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
The Language of Interfaces
destraynor
160
25k
The Invisible Side of Design
smashingmag
301
51k
Transcript
しばらくお待ちください
私について りゅーそう 埼玉県育ちのエンジニアです。 (生まれは千葉なのは内緒...) Saitama.jsの運営しています。 埼玉のおすすめ観光地は権現堂の桜 です
I LOVE 杉戸町 「杉戸天然温泉 雅楽の湯」は日本一 の温泉といっても過言ではない 食事は「高橋屋」で鰻コースを予約 して優勝です。 お子様連れは東武動物公園もあるよ (隣の宮代町だけど...)
画像:https://utanoyu.com/より
ありがとうございました! (今日はこれを伝えにきました)
サンプルのクソアプリ
フォームの(一部の) テストをやっていきます
再実装 React Testing Library
React Testing Library Reactコンポーネントのテストライブラリ https://testing-library.com/docs/react-testing-library/example-intro
None
ASSERTを自作していく💪 https://testing-library.com/docs/react-testing-library/example-intro
再実装 React Testing Library ASSERT編
DEMO InputWithAlert コンポーネント
STEP1:idを使ったテスト
STEP1:idを使ったテスト getByIdを作成する ・idは一意ではならない ・本来は必要のないマークアップ ・テスト書きながら、プロダクト独自 の値を参照するのがとても辛い
STEP2:roleを使ったテスト queryByRoleをつくる ・マークアップも改善する ・id管理がなくなるなど壊れにくいテス トになる ・(ロールの知識があれば)暗黙的にテ ストが書ける
STEP3: a11ty assertion aria-invalidをテストします
STEP3: a11ty assertion a11tyを関数でテスト ・マークアップがa11tyを満たしているかを関 数側で担保できる ・ まとめておくことで一連のinterfation test 的なのが書きやすい(はず...未検証.....)
・Headless UIが行っている
STEP3: a11ty assertion before after -----act----- https://github.dev/tailwindlabs/headlessui
TEST ALL PASS!! LGTM👏👏
None
ライブラリを適切に 使っていこう!
参考 「雅楽の湯公式サイト」 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/
おしまい