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
270
React Testing Library の Query について整理してみた
takf
January 27, 2022
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
290
Atomic Design とテストの○○な話
takfjp
2
1.3k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2k
FARM スタックに触れてみる
takfjp
0
710
React.js 消えるライフサイクルメソッドについて
takfjp
0
92
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.7k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
350
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
250
meguro.es.pdf
takfjp
0
100
Other Decks in Technology
See All in Technology
データマネジメントを支える武器としてのメタデータ管理
10xinc
1
340
SREsのためのSRE定着ガイド
netmarkjp
10
1.6k
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
220
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
私のRSpecの書き方 / How I write RSpec
tmtms
4
820
やっていきテスト
k6s4i53rx
0
160
AWS アーキテクチャクイズ
yuu26
2
700
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
150
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
160
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1353
200k
Ruby is Unlike a Banana
tanoku
95
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
What's new in Ruby 2.0
geeforr
335
31k
Agile that works and the tools we love
rasmusluckow
323
20k
Adopting Sorbet at Scale
ufuk
66
8.5k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
What the flash - Photography Introduction
edds
64
11k
Producing Creativity
orderedlist
PRO
335
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
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