はじめに
はじめまして、エンジニア就活中のとある大学院生です。(非情報系)
初めてReact Testing Libraryに触れる初心者が公式ドキュメントを読んでみました。
間違っていることを書いているかもしれませんが、その場合はコメントで教えてもらえると助かります。
メソッドの説明
1つの要素について
-
getBy...：条件に一致する要素を1つだけ見つけたいときに使う。
もし、そのような要素が存在しない、または要素が複数存在した場合はエラーを返します。 -
queryBy...：条件に一致する要素が無いときや1つだけ見つけたいときに使う。
getBy...との違いは、該当する要素が存在しないときにnullを返す点。 -
findBy...：条件に一致する要素を少し待って1つだけ見つけたいときに使う。
他とは異なり該当の要素を見つけるまで待ちます。デフォルトで1000msの間で見つからなかったり、複数の要素が見つかったらエラーを返します。
複数の要素について
-
getAllBy...,queryAllBy...,findAllBy...：それぞれに対応する複数の要素について見つけたいときに使う。
条件の指定
先程は「条件に対して何をするのか」ということについてフォーカスしていましたが、ここでは「条件の指定方法」について説明していきます。
...ByRole
属性に対して指定することができます。例えば、button属性を1つだけ取得したいときはgetByRole("button")と書きます。
指定できる属性の一覧は以下を参照してみてください。
...ByLabelText
label属性に関する条件。
getByLabelText("Username)としたときに以下のinput要素を取得することができる。
<label for="username-input">Username</label>
<input id="username-input" />
...ByPlaceholderText
placholderを条件として要素を取得することができます。
getByPlaceholderText("Username")で以下のinput要素が取得できます。
<input placeholder="Username" />
...ByText
単に画面上のテキストを条件に加えることができます。
getByText("Usename")で以下のh1要素を取得できます。
<h1>Username</h1>
...ByDisplayValue
input, textareaなどに入力されている値を条件にすることができます。
getByDisplayValue("Username")で以下のinput要素が取得できます。
<input value="Username"/>
また、以下のように書くことで指定の要素に対して入力値を変更することができます。
const usernameInput = screen.getByDisplayValue("Username") = "Tom"
...ByAltText
imgタグ内のalt属性を条件にすることができます。
getByAltText("Userphoto")で以下のimg要素が取得できます。
<img alt="Userphoto" src="photo.png" />
...ByTitle
titleタグやtitle属性を条件に加えることができます。
getByTitle("Delete")で最初にspan要素、getByTitle("Close")でsvg要素を取得することができます。
<span title="Delete" id="2"></span>
<svg>
<title>Close</title>
<g><path /></g>
</svg>
...ByTestId
HTMLタグ内にdata-testid属性を加えることで、この属性に対して条件を加えることができます。
getByTestId("custom-element")で以下のdiv要素を取得することができます。
<div data-testid="custom-element" />
このクエリは実際に開発する際にテストのために、data-testid属性を定義する必要があるため、可能な限り他のクエリを使うことが推奨されています。
おわりに
React Testing Libraryに初めて触れる初心者が、公式ドキュメントを読んでまとめてみました。今まで英語の公式ドキュメントを読む機会は少なかったため、これから慣れていきたいと思います。
また、以下の記事が実践的な内容に触れていて、とても勉強になったので紹介させていただきます。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼