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

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

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

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

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

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

公開日：2024年4月26日

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

INDEX

React Testing Libraryとは？
React Testing Libraryのインストール方法
React Testing Libraryの基本操作を解説
React Testing Libraryを使ってテストを実施してみよう
React Testing Libraryを学んで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とは？テストの書き方・使い方を分かりやすく解説」で詳しく解説しています。

＼文字より動画で学びたいあなたへ／

Udemyで講座を探す＞

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

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

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

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

npm install --save-dev @testing-library/react @testing-library/jest-dom

1	npm install --save-dev @testing-library/react @testing-library/jest-dom

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

npm install --save-dev react-test-renderer

1	npm install --save-dev react-test-renderer

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

基本設定

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

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

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

　
module.exports = {
  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
  testEnvironment: "jsdom",
};

module.exports = {

setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],

testEnvironment: "jsdom",

};

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

React Testing Libraryの基本操作を解説

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

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

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

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

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

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

　
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('コンポーネントが正しくレンダリングされる', () => {
  const { getByText } = render(&lt;MyComponent />);
  expect(getByText('Hello, World!')).toBeInTheDocument();
});

import { render } from '@testing-library/react';

import MyComponent from './MyComponent';

test('コンポーネントが正しくレンダリングされる', () => {

const { getByText } = render(<MyComponent />);

expect(getByText('Hello, World!')).toBeInTheDocument();

});

要素の取得

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

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

const button = getByRole('button', { name: 'Submit' });
const heading = getByText('Welcome to Our App!');

1 2	const button = getByRole('button', { name: 'Submit' }); const heading = getByText('Welcome to Our App!');

イベントの実行

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

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

　
import { fireEvent } from '@testing-library/react';

fireEvent.click(button);
fireEvent.change(input, { target: { value: 'new text' } });

import { fireEvent } from '@testing-library/react';

fireEvent.click(button);

fireEvent.change(input, { target: { value: 'new text' } });

アサーション関数

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

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

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

expect(element).toBeInTheDocument();
expect(mockFunction).toHaveBeenCalledTimes(1);

1 2	expect(element).toBeInTheDocument(); expect(mockFunction).toHaveBeenCalledTimes(1);

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

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

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

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

　　
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{`Count: ${count}`}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

import React, { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);

return (

<div>

<p>{`Count: ${count}`}</p>

<button onClick={() => setCount(count + 1)}>Increment</button>

</div>

);

}

export default Counter;

テストの実施

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

　
import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('カウンターが正しくインクリメントされる', () => {
  const { getByText } = render(<Counter />);
  
  // 初期値の確認
  expect(getByText('Count: 0')).toBeInTheDocument();
  
  // ボタンクリックイベントのシミュレーション
  fireEvent.click(getByText('Increment'));
  
  // インクリメント後の値を確認
  expect(getByText('Count: 1')).toBeInTheDocument();
});