ライブラリクエリセレクタのテスト

今日はテストライブラリを調べます.これはユーザの視点からUIコンポーネントをテストするためのパッケージセットです.
我々はすでにそれが私たちのReact tests . (この記事を始めるために)
私たちは、このライブラリが主にセレクタライブラリであることを覚えておかなければなりません.
これは、特定のフレームワークやテストライブラリにバインドされていません.
たとえばテキストで何かを問い合わせるには:

const defaultText = screen.getByText(/The counter is now on/g);

しかし、テストライブラリを使って検索した結果を確認するには、まだjestが必要です.

expect(defaultText).toBeInTheDocument();

テストライブラリにおけるクエリセレクタ

テストライブラリの大部分は、クエリセレクタを使用する能力です.あなたは、例でここの上で1つを見ることさえできます.
DOMの要素をすばやく見つける方法であり、以下のタイプを使用できます.

get

find

query

主な違いは、どのようにクエリを実行するか、エラーをスローするか、何かを待つかどうかです.
そして、これらのそれぞれは、1つまたは複数の要素を必要とするかどうかを定義するオプションを持っています.
を使用してこれを定義することができますBy or AllBy セレクターの後ろ.
一つの要素セレクタを使いたいとしましょう.

getBy

何も発見?エラーをスローします

1見つかった要素を返す

もっと発見?誤りを解く

findBy

何も発見?NULLを返す

1見つかった要素を返す

もっと発見?誤りを解く

queryBy

何も発見?エラーをスローします

1見つかった要素を返す

もっと発見?誤りを解く

基本的にはgetBy and queryBy 同じことをしなさい.つだけ大きな違いがある.queryBy 我々がこれを待つことができるように、約束を返します.
複数の要素については同じです.ただし、要素を返す代わりに、要素の配列を返します.

クエリの種類

クエリの方法を知っているので、使用できるクエリの種類に飛び込むことができます.
バイロール
私たちはByRole たとえば、DOM内の特定の役割を持つ要素を検索するには、ボタンを問い合わせたい場合.

const button = screen.getByRole('button');

Bylabeltext
The ByLabelText クエリは、特定のテキストを持つラベルを見つけることができます.
例えば、次のHTMLセットアップがあれば

<label>Name</label>

次のクエリを使用して、次のように選択できます.

const label = screen.getByLabelText('Name');

Byplaceholdertext
上記のように、特定のプレースホルダ値を持つ要素を照会するためにこれを使用できます.

const placeholder = screen.getByPlaceholderText('Enter your email');

本文
これは、我々が使用している一般的に知られているテキストセレクタですprevious articles .
これは、DOMのテキスト要素のクエリに使用することができますし、それは超強力な正規表現を活用することができます.

const defaultText = screen.getByText(/The counter is now on/g);
const defaultText = screen.getByText('The counter is now on 0');
// etc

値
名前が示すように、これは現在の表示値で要素を照会するために使用できます.
たとえば以下のHTMLを持っています.

<input type="text" id="lastName" value="Bongers" />

このようにこの要素を問い合わせます.

const value = screen.getByDisplayValue('Bongers');

ByalTextByAltText 特定のAltタグを持つ要素を見つけるための簡単なテストケースです.

const alt = screen.getByAltText('my amazing photo');

副題
Aを使用して要素をターゲットにするほど一般的に知られていないセレクタtitle 属性.

<i title="Delete"><Icon /></i>

const title = screen.getByTitle('Delete');

それからByTestId , しかし、我々は次の記事のそれに関する詳細に入ります.

結論

私は、あなたが質問セレクタのタイプとどのようにそれらの各々を使用するかについて何か新しいことを学んだことを望みます.
我々はさらにテストに飛び込むように、今後の記事を見てください.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or