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
470
React Testing Library の Query について整理してみた
takf
January 27, 2022
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
480
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.6k
FARM スタックに触れてみる
takfjp
0
1.4k
React.js 消えるライフサイクルメソッドについて
takfjp
0
130
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
410
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
310
meguro.es.pdf
takfjp
0
120
Other Decks in Technology
See All in Technology
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
270
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
1.4k
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
330
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
140
PdM業務における使い分け
shinshiro
0
670
Kiroから考える AIコーディングツールの潮流
s4yuba
1
390
生成AIを活用した野球データ分析 - メジャーリーグ編 / Baseball Analytics for Gen AI
shinyorke
PRO
1
240
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
690
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
810
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
170
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
590
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Statistics for Hackers
jakevdp
799
220k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
246
12k
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