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
180
再実装 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
430
Hydrogenで 2022年〜を感じる
nozaki
0
580
microCMSでimgixに入門する
nozaki
0
1k
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.3k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.7k
はじめてのUniversal JavaScript
nozaki
1
2.2k
Other Decks in Programming
See All in Programming
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
2.9k
Linux && Docker 研修/Linux && Docker training
forrep
23
4.2k
ファインディの テックブログ爆誕までの軌跡
starfish719
1
810
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
130
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
12
6.1k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
520
Pulsar2 を雰囲気で使ってみよう
anoken
0
150
CNCF Project の作者が考えている OSS の運営
utam0k
5
630
Scaling your build logic
antalmonori
1
150
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
7
1.6k
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
110
WebDriver BiDiとは何なのか
yotahada3
1
110
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Making Projects Easy
brettharned
116
6k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Unsuck your backbone
ammeep
669
57k
Git: the NoSQL Database
bkeepers
PRO
427
64k
A Tale of Four Properties
chriscoyier
158
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
128
19k
Gamification - CAS2011
davidbonilla
80
5.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
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/
おしまい