React Testing Library
React Testing Library は、DOM Testing Library を基盤として、Reactコンポーネントを扱うためのAPIを追加しています。
インストール
React Testing Library を使い始めるには、peerDependencyである @testing-library/dom と一緒にインストールする必要があります。
- npm
- Yarn
npm install --save-dev @testing-library/react @testing-library/dom
yarn add --dev @testing-library/react @testing-library/dom
TypeScriptを使用する場合
完全な型カバレッジを得るには、react と react-dom の型もインストールする必要があります。
- npm
- Yarn
npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom
yarn add --dev @testing-library/react @testing-library/dom @types/react @types/react-dom
問題点
Reactコンポーネントの保守しやすいテストを作成したいと考えています。この目標の一環として、テストにコンポーネントの実装の詳細を含めず、テストが意図した通りの信頼性を得られるようにすることに焦点を当てたいと考えています。そのため、テストベースを長期的に保守できるように、コンポーネントのリファクタリング（機能ではなく実装の変更）によってテストが壊れたり、チームの作業が遅れたりするのを避けたいと考えています。
このソリューション
React Testing Library は、Reactコンポーネントをテストするための非常に軽量なソリューションです。より良いテストプラクティスを促進する方法で、react-dom と react-dom/test-utils の上に軽量なユーティリティ関数を提供します。その主な指針となる原則は次のとおりです。
そのため、レンダリングされたReactコンポーネントのインスタンスを扱うのではなく、テストは実際のDOMノードを扱います。このライブラリが提供するユーティリティは、ユーザーと同じ方法でDOMをクエリすることを容易にします。ユーザーと同じようにラベルテキストでフォーム要素を見つけたり、ユーザーと同じようにテキストからリンクやボタンを見つけたりします。また、テキストコンテンツとラベルが意味をなさない、または実用的でない要素の「エスケープハッチ」として、`data-testid` で要素を見つけるための推奨される方法も公開しています。
このライブラリは、アプリケーションのアクセシビリティを向上させ、ユーザーが使用するのと同じ方法でコンポーネントを使用するテストに近づけることができます。これにより、実際のユーザーがアプリケーションを使用する際にアプリケーションが動作するという、より大きな自信をテストから得ることができます。
このライブラリは Enzyme の代替品です。Enzyme自体を使用してこれらのガイドラインに従うことは *可能* ですが、Enzymeが提供するすべての追加ユーティリティ（実装の詳細のテストを容易にするユーティリティ）があるため、これを強制することはより困難です。FAQ で詳細をご覧ください。
このライブラリではないもの:
- テストランナーまたはフレームワーク
- 特定のテストフレームワークに特化したもの（Jestを推奨していますが、ライブラリはどのフレームワークでも動作します。Jestなしでの使用 を参照してください）
注：このライブラリは、クエリの背後にあるロジックのほとんどが存在する
DOM Testing Libraryを基盤としています。
チュートリアル
ライブラリの概要については、以下の「React Testing Libraryとは？」のビデオをご覧ください。
また、React Testing Libraryのチュートリアル もご覧ください。