React Testing Libraryの使い方ガイド！Reactのユニットテストを書こう

2024-07-14

当サイトでは一部リンクに広告が含まれています

React Testing Libraryは、Reactアプリケーションのユニットテストを書くための便利なツールです。
しかし、これが初めての場合、どこから始めたらいいのか、何を学べばいいのか迷うことでしょう。

このガイドは、React Testing Libraryの基本的な概念と使用方法を学び、最初のテストを書き始めるための入門ガイドです。
ここでは、最初にReact Testing Libraryとは何か、なぜそれが重要なのかを理解することから始め、その後で実際にテストを書く方法を学んでいきます。

React Testing Libraryの全体像をつかんでいただきつつ、各章では、具体的なコード例をお見せしながら、様々なテストケースの作成方法を紹介します。

また、Jestと組み合わせた使用方法や、テストカバレッジの確認方法についても解説します。
これらの知識は、あなたがReact Testing Libraryを使用して、品質の高いテストを書くために必要なものです。

React Testing Libraryを使いこなせば、あなたのReactアプリケーションはより堅牢で信頼性の高いものになるでしょう。
是非、この機会に React でのテスト方法を学んでいきましょう！

React Testing Libraryの基礎

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

まず、React Testing Libraryを使うためにはインストールが必要です。
ここでは、npmというパッケージマネージャーを使ってインストールします。
パッケージマネージャーとは、プログラムの部品（パッケージ）をインストールしたり管理したりするためのツールです。

具体的なインストールのコマンドは以下の通りです。

npm install --save @testing-library/react

これをターミナルに入力して実行することで、React Testing Libraryをインストールできます。

React Testing Libraryの概要と使い方

次に、React Testing Libraryの基本的な使い方について説明します。

まずは、簡単なテストを書いてみましょう。
例えば、以下のようなコンポーネントがあるとします。

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

このコンポーネントは、「Hello, {name}!」と表示するものです。

このコンポーネントが正しく動作するかテストするために、React Testing Libraryを使用します。

具体的なテストコードは以下の通りです。

import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('renders a greeting', () => {
  render(<Greeting name="John" />);
  const helloElement = screen.getByText(/hello, john/i);
  expect(helloElement).toBeInTheDocument();
});

これは、「Hello, John!」と表示することを確認するテストです。
render関数でコンポーネントを描画し、screen.getByText関数で表示されたテキストを取得しています。

renderとscreenの基本的な使い方

それでは、renderとscreenについて詳しく見ていきましょう。

render関数は、Reactコンポーネントを描画するための関数です。
上記の例で見たように、以下のように使います。

render(<Greeting name="John" />);

一方、screenは、描画されたコンポーネントから要素を取得するためのオブジェクトです。
上記の例では、getByText関数を使ってテキストを取得しています。

具体的な使用例は以下の通りです。

const helloElement = screen.getByText(/hello, john/i);

これらを組み合わせることで、Reactコンポーネントのテストを書くことができます。

JestとReact Testing Library

「Jest」は、JavaScriptのテストフレームワークの一つです。
JavaScriptのテストフレームワークとは、JavaScriptのコードをテストするためのツールのことを指します。

Jestとは何か？

Jestは、Facebookが開発したJavaScriptのテストフレームワークで、Reactと一緒に使用されることが多いです。
Jestは、機能が豊富で設定が簡単なため、初心者にもおすすめです。

React Testing LibraryとJestを組み合わせたテストの作り方

それでは、React Testing LibraryとJestを組み合わせてテストを書く方法について見ていきましょう。

前述の「Greeting」コンポーネントのテストコードを思い出してください。

import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('renders a greeting', () => {
  render(<Greeting name="John" />);
  const helloElement = screen.getByText(/hello, john/i);
  expect(helloElement).toBeInTheDocument();
});

このコードの中で、「test」や「expect」などの関数はJestに由来します。
それぞれの役割について説明します。

test: テストを定義します。第1引数はテストの名前、第2引数はテストの内容（関数）です。
expect: テストの結果をチェックします。「expect(検査対象).チェックの方法(期待値)」の形式で使います。

test('テストの名前', () => {
  // テストの内容
});

expect(検査対象).チェックの方法(期待値);

上記のテストコードでは、「Greeting」コンポーネントが「Hello, John!」というテキストを表示することを確認しています。

これが、React Testing LibraryとJestを組み合わせたテストの基本的な書き方です。

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

前章まででReact Testing Libraryの基本的な使い方や機能を学びましたが、その前に必要なインストール方法について解説していきます。

npmを使ったインストール

React Testing Libraryを利用するには、まずNode.jsとnpm（Node Package Manager）をインストールする必要があります。
Node.jsはJavaScriptをブラウザの外で実行するための環境で、npmはNode.jsのパッケージ（ライブラリ）を管理するツールです。

Node.jsとnpmがインストールされていることを確認したら、次にReact Testing Libraryをインストールします。

以下のコマンドを実行することで、React Testing Libraryをインストールできます。

npm install --save @testing-library/react

これでReact Testing Libraryがインストールされ、Reactのテストを書くことができるようになります。

React Testing Libraryの基本的な設定

React Testing Libraryを使うには、特別な設定は基本的には必要ありません。
ただし、テストを書く際にはJestと一緒に使うことが多いため、Jestの設定をすることがあります。

Jestの設定は、プロジェクトのルートディレクトリにjest.config.jsという名前のファイルを作成し、そこに設定を書きます。

例えば、以下のような設定を書くことができます。

module.exports = {
  // テストに含めるファイルのパターン
  testMatch: ['**/__tests__/**/*.js', '**/?(*.)+(spec|test).js'],

  // テスト環境
  testEnvironment: 'jest-environment-jsdom',

  // テスト対象のモジュール
  moduleFileExtensions: ['js', 'jsx'],
};

この設定は、テストに含めるファイルのパターンやテスト環境、テスト対象のモジュールなどを定義しています。

以上が、React Testing Libraryのインストール方法と基本的な設定です。

React Testing Libraryの詳細

この章では、React Testing Libraryの詳細について解説します。
より具体的な使い方やテストの書き方について理解を深めましょう。

getByRoleの利用法

React Testing Libraryでは、さまざまな方法で描画された要素を取得できます。
その一つが「getByRole」関数です。

「getByRole」関数は、要素の役割（role）を指定して要素を取得する関数です。
例えば、以下のように使います。

const buttonElement = screen.getByRole('button');

このコードは、roleが’button’（ボタン）の要素を取得します。

具体的には、以下のようなテストで使うことができます。

import { render, screen } from '@testing-library/react';
import MyButton from './MyButton';

test('renders a button', () => {
  render(<MyButton />);
  const buttonElement = screen.getByRole('button');
  expect(buttonElement).toBeInTheDocument();
});

このテストは、「MyButton」コンポーネントがボタンを表示することを確認します。

hooksのテスト方法

Reactの「hooks」は、関数コンポーネントでstateやライフサイクルメソッドを使えるようにする機能です。
React Testing Libraryでは、これらのhooksのテストも可能です。

hooksのテストのためには、専用のツール「@testing-library/react-hooks」を使用します。
まず、このツールをインストールします。

npm install --save @testing-library/react-hooks

そして、以下のようにhooksのテストを書きます。

import { renderHook } from '@testing-library/react-hooks';
import useMyHook from './useMyHook';

test('useMyHook returns expected value', () => {
  const { result } = renderHook(() => useMyHook());
  expect(result.current).toBe('expected value');
});

このテストは、「useMyHook」フックが期待する値を返すことを確認します。

テストカバレッジをチェックする

テストを書く際、全てのコードがテストされているか、どの部分がテストから漏れているかを知るには、テストカバレッジをチェックすることが重要です。テストカバレッジは、テストがどれだけの範囲をカバーしているかをパーセンテージで表示します。

Jestでのテストカバレッジの確認方法

Jestを使ってテストカバレッジを確認する方法を紹介します。以下のコマンドを実行することで、テストカバレッジを確認できます。

npm test -- --coverage

また、package.jsonのscriptsセクションに以下のように記述することでも、npm run coverageというコマンドでテストカバレッジを確認できます。

"scripts": {
  "test": "jest",
  "coverage": "jest --coverage"
}

テストカバレッジレポートの読み方

テストカバレッジを確認すると、以下のようなレポートが表示されます。

-------------------|---------|----------|---------|---------|-------------------
File               | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------------|---------|----------|---------|---------|-------------------
All files          |   98.78 |      100 |     100 |   98.78 |
 MyComponent.js    |   98.78 |      100 |     100 |   98.78 | 33
-------------------|---------|----------|---------|---------|-------------------

このレポートには、「% Stmts」、「% Branch」、「% Funcs」、「% Lines」の4つのカテゴリがあります。それぞれ、ステートメントのカバレッジ、ブランチ（if文やswitch文）のカバレッジ、関数のカバレッジ、行のカバレッジを示しています。

「Uncovered Line #s」の列には、テストから漏れているコードの行番号が表示されます。この情報をもとに、テストを追加してカバレッジを改善することができます。

以上が、テストカバレッジをチェックする方法の基本的な解説です。

テストカバレッジを高める方法

テストカバレッジを高めるためには、以下のような方法があります。

全てのパブリック関数やメソッドをテストする: パブリックな関数やメソッド（外部からアクセス可能な関数やメソッド）は全てテストすることが基本です。
異なるパラメータで関数をテストする: 同じ関数でも、渡すパラメータによって動作が変わる場合があります。そのため、異なるパラメータで関数をテストすることが重要です。
エッジケースをテストする: エッジケース（極端な入力値や状況）もテストすることが重要です。これにより、意図しない動作を防ぐことができます。

これらの方法を活用することで、テストカバレッジを高めることができます。

React Testing Libraryのrender関数の使い方

React Testing Libraryで最も基本的で重要な関数が「render」関数です。この章では、render関数の使い方について詳しく解説します。

render関数の基本的な使い方

render関数は、Reactのコンポーネントを描画するための関数です。テストでは、まずrender関数でコンポーネントを描画し、その後に描画された結果をチェックします。

render関数の基本的な使い方は以下の通りです。

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

test('renders MyComponent', () => {
  render(<MyComponent />);
});

このコードは、「MyComponent」というコンポーネントを描画するテストです。まだ何もチェックしていませんが、このコードで「MyComponent」が描画できるかどうかを確認できます。

render関数からの戻り値

render関数は、オブジェクトを戻り値として返します。このオブジェクトには、描画結果にアクセスするための様々なツールが含まれています。

以下のコードでは、render関数の戻り値を利用して、特定のテキストが描画されているかをチェックしています。

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

test('renders hello text', () => {
  const { getByText } = render(<MyComponent />);
  const helloElement = getByText(/hello/i);
  expect(helloElement).toBeInTheDocument();
});

このテストでは、「MyComponent」が”hello”というテキストを描画することを確認しています。

render関数と他の関数の組み合わせ

render関数は、React Testing Libraryの他の関数と組み合わせて使うことができます。

例えば、先ほど紹介した「getByRole」関数を組み合わせて、特定の役割を持つ要素が描画されているかをチェックすることも可能です。

以上が、React Testing Libraryのrender関数の基本的な使い方です。

React Testing LibraryでのgetByRoleの使い方

React Testing Libraryでテストを行う際、画面上の要素を取得するために「getByRole」関数を使うことがあります。この章では、getByRole関数の使い方について解説します。

getByRole関数の基本的な使い方

getByRole関数は、ロール（役割）を指定して要素を取得する関数です。HTMLの要素は、ボタンやリンクなどのロールを持っています。

以下のコードは、getByRole関数を使ってボタン要素を取得し、そのボタンが描画されているかを確認するテストです。

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

test('renders a button', () => {
  render(<MyComponent />);
  const buttonElement = screen.getByRole('button');
  expect(buttonElement).toBeInTheDocument();
});

getByRole関数の引数について

getByRole関数は、引数にロールの名前を指定します。ボタン要素を取得する場合は’button’、リンク要素を取得する場合は’link’と指定します。

また、getByRole関数にはオプションとしてオブジェクトを渡すこともできます。このオプションには、name属性やhidden属性などの値を指定することができます。

以下のコードは、name属性が’Close’であるボタン要素を取得するテストです。

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

test('renders a close button', () => {
  render(<MyComponent />);
  const closeButton = screen.getByRole('button', { name: 'Close' });
  expect(closeButton).toBeInTheDocument();
});

以上が、React Testing LibraryのgetByRole関数の基本的な使い方です。

React Hooksのテスト方法

Reactの中でも特に重要な部分である、Hooks（フック）のテスト方法について解説します。HooksはReactの機能で、関数コンポーネント内でstateやライフサイクルなどのReactの特性を使用できるようにするものです。

Hooksの基本的なテスト方法

まず、一番基本的なHookであるuseStateを使ったコンポーネントのテスト方法を見てみましょう。

以下の例では、ボタンをクリックするとテキストが更新されるコンポーネントのテストを行っています。

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

test('changes text on button click', () => {
  const { rerender } = render(<MyComponent />);
  const button = screen.getByRole('button');

  fireEvent.click(button);
  rerender(<MyComponent />);

  expect(screen.getByText(/clicked/i)).toBeInTheDocument();
});

ここでのポイントはfireEvent.click(button);でボタンクリックをシミュレートしていることと、rerender(<MyComponent />);でコンポーネントの更新を再現していることです。

Custom Hooksのテスト方法

カスタムフック（自作のフック）をテストする際には、特別な工夫が必要です。その理由は、フックがコンポーネントの外部で実行できないからです。

そのため、カスタムフックをテストする際には、そのフックを使用するダミーコンポーネントを作成します。

import { render, act, screen } from '@testing-library/react';
import useCustomHook from './useCustomHook';

test('useCustomHook changes text on button click', () => {
  function TestComponent() {
    const { handleClick, text } = useCustomHook();

    return (
      <button onClick={handleClick}>{text}</button>
    );
  }

  render(<TestComponent />);
  const button = screen.getByRole('button');

  act(() => {
    fireEvent.click(button);
  });

  expect(screen.getByText(/clicked/i)).toBeInTheDocument();
});

以上が、React Testing LibraryでのReact Hooksのテスト方法の基本的な解説です。