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 の Query について整理してみた
Search
takf
January 27, 2022
Technology
0
480
React Testing Library の Query について整理してみた
takf
January 27, 2022
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
490
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.6k
FARM スタックに触れてみる
takfjp
0
1.5k
React.js 消えるライフサイクルメソッドについて
takfjp
0
130
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3.1k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
410
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
320
meguro.es.pdf
takfjp
0
120
Other Decks in Technology
See All in Technology
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
110
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.2k
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
130
エラーとアクセシビリティ
schktjm
0
930
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
520
AI開発ツールCreateがAnythingになったよ
tendasato
0
110
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
180
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
530
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
9.9k
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
190
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
270
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.4k
Featured
See All Featured
Designing for Performance
lara
610
69k
Into the Great Unknown - MozCon
thekraken
40
2k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Writing Fast Ruby
sferik
628
62k
Gamification - CAS2011
davidbonilla
81
5.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
We Have a Design System, Now What?
morganepeng
53
7.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
React Testing Library の Query に ついて整理してみた 2022.01.27 フロントエンドLT Vol.1
【オンライン】 @takfjp
自己紹介 Takeru Furuichi (@takfjp) コネヒト株式会社 所属 「ママリ」という出産・育児領域のサービスを開発・運営してい ます フロント: React
バックエンド: CakePHP
None
みなさんフロントエンドのテスト 書いてますか?
使っているテストツールは? Jest / testing-library / cypress etc...
今回は Testing Library のクエリの 使用方法についてまとめてみました
testing-library で要素を get する方法 screen.getByXXX -> で要素の有無を判定
使い始めの頃 test-id で要素を get するの楽ちん expect(screen.getByTestId('Hoge')).toBeInTheDocument() 全部これ使えばええやん!
そう思っていた時期がありました
しかし、優先順位が決められている
Queries Accessible to Everyone getByRole ARIA で定められたRole に基づいて要素を特定する Role はHTML
要素(DOM) に結びついているため、目視できるText などよりも確実に要素を取得することに適している アクセシビリティの観点から、全てのユーザーがアクセスできる ように定められているので使用時の優先度が高い button, checkbox, option など getByRole('button', {name: /submit/i}) [submit] というボタンを見つけることができる
こんな場合でも使える <h1> Hello <p>World</p> </h1> screen.getByText('Hello World') -> NG screen.getByRole('heading',
{name: 'Hello World'}) -> OK
Queries Accessible to Everyone 2 getByLabelText フォームフィールドをGet するときに適している。 ユーザーはラベルテキストを頼りにWeb サイトのフォームの要素
を見つけるため、フォームの要素をGet するときに優先されるべ き、とある getByPlaceholderText Label の代わりにはならないが、Placeholder が用意されているな ら特定に使う要素に優先した方がよい
getByText <p> <div> <span> などRole を持たない要素の中身を取得したい ときに使う Button に書いてある文言が上記のタグとかぶっていない時にも使 える
getByDisplayValue input 要素内に入力されたテキストをGet する時に使う
Semantic Queries HTML5 およびARIA 準拠のセレクター getByAltText img, area, input など
alt 属性が付与可能な要素を取り出す時に使 用できる 特に img に対して使う頻度が多いのでは? getByTitle SVG の中に埋め込まれたタイトル要素を使う時に重宝する
test-id (getByTestId) getByRole, getByText など用意された手段が全て使えない時の最終 手段 test のためだけに用意された属性であり、セマンティクスの重要性 が低いため濫用することは推奨されていない Role
やText で一致できない場合 = <p> タグなどで必ず出現するが、 中身のテキストが動的で常に特定しづらい場合 <p data-test-id="Fetched_Text">{result.text}</p>
雑感 フロントエンドテストを書く時はDOM のセマンティクスやアクセ シビリティも意識して書いていきたい しかし確実に要素の有無を判定したいシチュエーションはまだまだ ある 優先度順に試しつつ適宜 test-id もうまく使っていきたい
We're Hiring! https://connehito.com/recruit/
Thank you!
None