Testing Library のtestidが便利

Testing Libraryとは

Testing Libraryは、ユーザーの視点からWebアプリケーションをテストすることを重視している、UIコンポーネントをテストするためのライブラリです。UI上に表示される文字列や操作方法を簡単にテストすることができるようになっています。また、どのようなJavaScriptフレームワーク（ReactやVueなど）が使用されているかにかかわらず、統一されたAPIが提供されていて、フレームワーク間の移行や異なるフレームワークを混在させることができるようになっています。

data-*属性

data-*属性は、HTML5で導入された属性で、ユーザー定義のデータをHTML要素に追加するために使用されます。
この属性は、HTML要素の任意の属性に付与することができます。
data-*属性の名前は、data-から始まり、その後に任意の文字列を付けることができます。
例えば、data-custom-attributeという名前の属性を付けることができます。

例：

<div data-custom-attribute="value">Content</div>

テストコードを書くときには、idやclassなどのセレクタを利用して、テストに利用するHTML要素を識別する必要があります。

テストに利用する要素を識別する方法として、ベストプラクティスといわれている方法は、要素にdata-*属性を付与して、
data-*属性を利用して、識別する方法です。

どうしてこれがベストプラクティスと呼ばれているかの背景については、下記の記事に詳しく説明されているので、そちらをご覧ください。
https://blog.autify.com/ja/why-id-should-not-be-used

data-testid

Testing Libraryでは、data-testid属性を割り当てたHTML要素の参照を取得するAPIがあります。

ByTestIdを使用しない場合は、次のような形で取得しなければならず、直感的でないため覚えるのが大変でした。

例：

const element = baseElement.querySelector('[data-testid="custom-element"]');

ByTestIdを使うと、HTML要素の参照を簡単に取得することができます。

例：

<div data-testid="custom-element" />

import {screen} from '@testing-library/dom'
cost element = screen.getByTestId('custom-element')

button要素などでも同様に取得することができ、

例：

fireEvent.click(buttonElment)

で、buttonのクリックをすることができます。

まとめ

要素の参照の取得方法のベストプラクティスであるdata-*属性を使うときは、
Testing LibraryのByTestIdを使うと快適にテストコードを書くことができます。

他にも便利なAPIがたくさんあるので、ぜひTesting Libraryを試してみてください。