Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React Testing Library の Query について整理してみた
takf
January 27, 2022
Technology
0
64
React Testing Library の Query について整理してみた
takf
January 27, 2022
Tweet
Share
More Decks by takf
See All by takf
Node.jsのアップグレードで気をつけたこと
takfjp
1
61
FARM スタックに触れてみる
takfjp
0
87
React.js 消えるライフサイクルメソッドについて
takfjp
0
66
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.2k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
300
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
200
meguro.es.pdf
takfjp
0
77
29歳でWeb業界に入って 人生がリスタートした話 (と、これからのこと)
takfjp
2
580
React + Firebase でヒートマップを実装する
takfjp
1
1.2k
Other Decks in Technology
See All in Technology
Stripe Search APIを利用した、LINEとStripeの顧客情報連携/line-dc-202205
stripehideokamoto
0
130
SRE の歩き方・進め方 / sre-walk-through-procedure
rrreeeyyy
0
590
A1A会社紹介資料-2022-05-20
a1a
2
1.1k
Scrum Fest Niigata 2022 開発エンジニアに聞いてみよう!
moritamasami
1
610
家の明るさ制御 / Brightness Control in My House
1024jp
0
140
Spotify物理コントローラーがほしい
miso
0
170
CTOのためのQAのつくりかた #scrumniigata / SigSQA How to create QA for CTOs and VPoEs
caori_t
0
330
SRENEXT2022 組織にSREを実装していくまでの道のり
marnie0301
1
720
Devに力を授けたいSREのあゆみ / SRE that wants to empower developers
tocyuki
3
480
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
15
8k
How We Foster Reliability in Diversity
nari_ex
PRO
10
3.1k
[SRE NEXT 2022]組織に対してSREを適用するとはどういうことか
srenext
0
460
Featured
See All Featured
Thoughts on Productivity
jonyablonski
43
2.2k
Three Pipe Problems
jasonvnalue
89
8.6k
How STYLIGHT went responsive
nonsquared
85
3.9k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
Bash Introduction
62gerente
596
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
3
580
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Unsuck your backbone
ammeep
659
55k
Making Projects Easy
brettharned
98
4.3k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
450
Web development in the modern age
philhawksworth
197
9.3k
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