React-Testing-Libraryとは？
- 2018年にリリースされました。
- Enzymeに取って代わるライブラリです。
- ユーザー視点でテストを行います。
Enzymeとの比較
Enzymeはユニットテストに特化しており、stateやpropsなどの実装の詳細をテストしますが、React-Testing-Libraryは結合テストに特化していて実際にレンダーされているDOMに対してユーザーが行う操作に近い形のテストをかけます。（ユーザーが実際に画面上でDOM操作するE2E寄りのテストになる。もちろん限界はあるので一部APIなどはモック化は必要ですが。）
機能
render
ReactのコンポーネントのHTML構造を取得してくれます。react-testing-library内の処理でReactコンポーネントにアクセスすることができるようになります。（screen.debug()でどのようにレンダリングされているかDOMを取得できます。）
実装例
詳しくは下記の記事で解説しています。
userEvent
ユーザーがボタンをクリックしたり、入力フォームに入力したりと言った動作をシミュレーション出来ます。非同期処理になるのでawaitで入力が完了するまで待った上で検証することが普通です。
custom hook
cleanup
itの中でrenderを使う度にブラウザにマウントされるのですが、cleanupを使うとマウントを解除（アンマウント）してくれます。テスト間であるコンポーネントがマウントされていることによる副作用を除去できより正確なテストを実施することにつながります。afterEachなどと組み合わせて各itが呼ばれた後とかに毎回マウントを解除させるために使われたりします。
実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { cleanup } from "@testing-library/react"; afterEach(() => cleanup()); describe("テスト1", () => { it("ケース1", () => { xxxx }); }); describe("テスト2", () => { it("ケース2", () => { yyyy }); }); |
describeブロック
テストスイート
itブロック
テストケース、必ずしもdescribeブロックに内包する必要はないです。内部にexpectなどのアサーションを記述していきます。
この記事へのコメントはありません。