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
450
Hydrogenで 2022年〜を感じる
nozaki
0
610
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
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
32
8.6k
iOS開発スターターキットの作り方
akidon0000
0
190
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6k
GPUを計算資源として使おう!
primenumber
1
290
型で語るカタ
irof
1
830
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
160
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
790
階層化自動テストで開発に機動力を
ickx
1
420
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
660
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
460
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A designer walks into a library…
pauljervisheath
207
24k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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/
おしまい