React Testing Libraryとは？基本設定や操作方法を解説！

React Testing Libraryに興味を持っているものの、

・React Testing Libraryの基本的な使い方が分からない…
・どのようにしてテストを強化するか悩んでいる…

という開発者も少なくないのではないでしょうか。そこでこの記事では、

・React Testing Libraryを使ったテストの基本設定と操作方法
・Jestと組み合わせて使う際のポイント

について詳しく解説します。

この記事を通してReact開発におけるテストの質を、飛躍的に向上させる方法を身につけましょう。

React Testing Libraryとは？

React Testing Libraryは、Reactアプリケーションのテストコード作成を容易にするために設計されたツールです。2018年にKent C. Doddsによって開発され、Reactコミュニティで広く受け入れられています。

従来のテストライブラリであるEnzymeと比較すると、React Testing Libraryはより実際のユーザーの使用経験に近いテストを行うことができるでしょう。

ツールを使用することで、コンポーネントのレンダリングやユーザーイベントのシミュレーション、要素のクエリなど、開発者はより信頼性の高いテストを構築できます。

Reactについて詳しく知りたい方は、「初心者向け React入門！その特徴や導入・実装方法について解説」をご覧ください。

ユーザー中心のテストができる

React Testing Libraryの最大のメリットは、ユーザーの視点に立ったテストが可能になることです。ライブラリを使うことで、開発者は内部ロジックではなく、実際のユーザーインタフェースの挙動をテストすることに集中できます。

仮にリファクタリングが必要になった場合でも、テストの大幅な修正が不要になるなど、保守性の向上が期待できるでしょう。

プログラムのテストについて詳しくは「単体テストとは？メリットや手法、仕様書について詳しく解説！」をご覧ください。

Jestと併用することが多い

React Testing Libraryを使用する際には、Jestと組み合わせて使うのが一般的です。

Jestは、Reactアプリケーションのテストフレームワークであり、テストファイルの自動発見やテストの実行、期待値との比較など、テストプロセス全体をサポートします。

組み合わせによって、React開発者はより効率的かつ包括的なテスト環境を構築することが可能です。

Jestについては、「Jestとは？テストの書き方・使い方を分かりやすく解説」で詳しく解説しています。

React Testing Libraryのインストール方法

Reactアプリケーションのテストをはじめるにあたり、React Testing Libraryのセットアップは最初に必ず行う必要があります。

create-react-appを用いて新しいプロジェクトをはじめた場合、JestとReact Testing Libraryは既にプロジェクトに組み込まれています。しかし、カスタムセットアップを行う場合や、既存のプロジェクトにテスト機能を追加する場合は、手動でインストールしなければいけません。

React Testing Libraryをインストールするには、次のコマンドをプロジェクトのルートディレクトリで実行してください。

Reactのコンポーネントを正しくレンダリングする場合は、react-test-rendererもインストールしましょう。

これで、Reactコンポーネントのテストを書き始める準備が整いました。

基本設定

React Testing Library自体は、追加の設定なしで直ちに使用開始できますが、Jestを用いたテスト実行環境を最適化するためには、基本的な設定を行う必要があります。

プロジェクトのルートディレクトリにjest.config.jsファイルを作成し、次のような基本的な設定を記述することで、Jestの動作をカスタマイズ可能です。

以下の例（サンプルコード）では、@testing-library/jest-domの拡張機能を使って、Jestで使用できるアサーションメソッド（テスト結果が想定通りか確認するメソッド）の範囲を拡大しています。

setupFilesAfterEnvは、テストファイルが読み込まれる前に指定したスクリプトを実行します。testEnvironmentをjsdomに設定することで、ブラウザ環境を模倣し、DOM操作を伴うテストが可能です。

React Testing Libraryの基本操作を解説

ここでは、React Testing Libraryで頻繁に使用される基本的な操作について詳しく解説していきます。

操作を覚えることで、開発者はReactコンポーネントを効果的にテストできます。

div要素の生成・レンダリング

React Testing Libraryでテストを開始する際、はじめにテスト対象のReactコンポーネントをDOM上にレンダリングします。レンダリングは、render関数を使用して行われます。

render関数は、指定されたReactコンポーネントを仮想DOMではなく、実際のDOM要素にレンダリングしてください。操作により、テスト中のコンポーネントがブラウザ上でどのように表示されるかを、正確に評価することができます。

例えば、次のようにしてMyComponentをテスト環境のDOMにレンダリング可能です。

要素の取得

レンダリングされたコンポーネント内の要素を取得するために、React Testing Libraryでは複数のクエリ関数が利用できます。

関数は、画面上のユーザーがアクセス可能な要素を検索することに焦点を当てています。getByRoleやgetByText、queryByText などの関数を使用することで、特定のテキストや役割を持つ要素を簡単に見つけることが可能です。

イベントの実行

ユーザーインターフェースのテストにおいて、イベントのシミュレーションは不可欠です。

React Testing Libraryでは、fireEvent関数を使用して、様々なユーザーイベントを実行できます。イベントのシミュレーション機能を使用することで、クリックや入力など、ユーザーがコンポーネントと対話するさまざまなシナリオをテストできます。

アサーション関数

React Testing Libraryでは、テスト結果が期待通りであるかを確認するために、特定のアサーション（検証）関数が利用可能です。関数を使うことで、テスト対象のコンポーネントや要素が、適切に動作しているかを検証できます。

代表的なアサーション関数には、 ドキュメント内に特定の要素が存在するかを確認する toBeInTheDocumentやイベントが期待された回数だけ発生したかを調べるtoHaveBeenCalledTimesなどがあります。

これらの関数を利用することで、より精密なテストを行うことが可能です。

React Testing Libraryを使ってテストを実施してみよう

ここでは、簡単なサンプルプログラムに対してテストを実施し、その過程を詳細に解説していきます。

サンプルプログラム（ボタンクリックでカウントアップするコンポーネント）

以下は、テストで利用するサンプルプログラムです。

テストの実施

上記のサンプルプログラムに対して、React Testing Libraryを使用してテストを実施します。主な目的は、ボタンをクリックすることでカウントが正しくインクリメント（変数の値が増加）されるかを確認することです。

テストコードの流れ

テストコードを使った、コンポーネントテストの基本的な流れは以下になります。

1. render関数を使用してCounterコンポーネントをDOMにレンダリングします。
2. getByTextを用いて特定のテキストを含む要素を取得し、fireEvent.clickを使用してクリックイベントをシミュレートします。
3. 期待される結果（この場合はカウントが1にインクリメントされること）が得られたかをexpectとtoBeInTheDocumentを使ってアサーションします。

このようにReact Testing Libraryを使うことで、実際のユーザー操作を模倣したテストが可能です。

コンポーネントが予期した通りに動作するかを確認することで、より信頼性の高いReactアプリケーションを開発することができるでしょう。

React Testing Libraryを学んでReact開発を効率化しよう！

React Testing Libraryは、実際のユーザー体験を模倣したテストを可能にするため、Reactアプリの品質向上に欠かせないツールです。ライブラリを使いこなせば、アプリ開発の効率化とテストの精度を格段に高めることができます。

テストの基本から応用までを学びたい方には、以下の講座がおすすめです。

高品質なReactアプリを効率的に開発するために、今すぐテストのスキルを磨きましょう。