testing-library/react-testing-library

これは何？

主な機能

• 01ユーザーが要素を見つける方法にならい、アクセシブルなロール、ラベル、テキストで要素を検索できます。
• 02コンポーネントのマウントや操作のシミュレーションに使えるrenderとfireEventヘルパーを提供します。
• 03非同期のUI更新に対応するfindやwaitForなどのユーティリティを備えています。
• 04react-domをベースに、Jestなどのテストランナーで利用できます。
• 05jest-domのマッチャーと組み合わせることで、読みやすいDOMアサーションを書けます。

ユースケース

• リファクタリング後も壊れにくい、Reactコンポーネントのユニットテストや統合テストを書く。
• Reactアプリケーションのフォーム、ユーザーフロー、条件付きレンダリングをテストする。
• 読み込み状態や取得したデータなど、非同期のUI動作を検証する。

クイックスタート

1. 1

   npm を使って React Testing Library と DOM testing utilities を開発依存関係としてインストールします

   npm install --save-dev @testing-library/react @testing-library/dom
2. 2

   代わりに yarn でインストールすることもできます

   yarn add --dev @testing-library/react @testing-library/dom
3. 3

   ライブラリの render と screen を使ってコンポーネントをレンダリングし、ユーザーと同じ方法で要素を検索するテストを書きます

使う前に知っておきたいこと

• !バージョン 16 以降では、@testing-library/dom を別途インストールする必要があります。
• !バージョン 13 以降には React 18 が必要です。古い React プロジェクトではバージョン 12 を使用してください。

トピック

よくある質問

react-testing-library とは？

ユーザーの操作に沿ってコンポーネントを検索・操作できる、軽量なReact DOMテストユーティリティ。 React Testing Libraryは、react-domとreact-dom/test-utilsをベースにしたユーティリティ関数を提供し、Reactコンポーネントのテストを支援します。テストはソフトウェアの実際の使われ方に近づけるべきという考え方に基づき、コンポーネントのインスタンスではなくDOMノードに焦点を当て、実装の詳細を公開しないようにしています。

react-testing-library は無料で使えますか？ライセンスは？

react-testing-library は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-testing-library は今もメンテナンスされていますか？

半年以内に更新あり。react-testing-library の最終コミットは 2026年8月27日 です。

react-testing-library は何に使えますか？

リファクタリング後も壊れにくい、Reactコンポーネントのユニットテストや統合テストを書く。 Reactアプリケーションのフォーム、ユーザーフロー、条件付きレンダリングをテストする。 読み込み状態や取得したデータなど、非同期のUI動作を検証する。

react-testing-library のインストール方法は？

npm を使って React Testing Library と DOM testing utilities を開発依存関係としてインストールします: npm install --save-dev @testing-library/react @testing-library/dom 代わりに yarn でインストールすることもできます: yarn add --dev @testing-library/react @testing-library/dom ライブラリの render と screen を使ってコンポーネントをレンダリングし、ユーザーと同じ方法で要素を検索するテストを書きます

react-testing-library はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/testing-library/react-testing-library