React Testing LibraryでDOM変更を検証する具体的な方法を徹底解説

Reactアプリケーションの開発において、ユーザーインターフェースの動的な変化をテストすることは、バグを未然に防ぎ、コードの信頼性を高めるために不可欠です。その際、React Testing Libraryは、実際のユーザー操作に近い形でテストを行えるツールとして、広く利用されています。本記事では、React Testing Libraryを使ってDOMの変更を検証する具体的な方法について、初心者から中級者向けに分かりやすく解説します。これを習得することで、Reactアプリケーションのテストをより効果的に行うスキルが身につきます。

React Testing Libraryとは

React Testing Libraryは、Reactコンポーネントのテストを行うための軽量で直感的なツールです。DOMツリーを直接操作するのではなく、ユーザーがアプリケーションを操作する方法に近い形でテストを記述することができます。このライブラリは、以下のような特徴を持っています。

ユーザー中心のアプローチ

React Testing Libraryは、ユーザーの視点に立ったテストを推奨します。具体的には、DOMのクラスやIDではなく、テキストやロール（役割）に基づいて要素を検索する方法を提供します。

React特化のツール

Reactのレンダリングモデルに最適化されており、Reactコンポーネントのテストを簡単かつ効果的に行えます。また、Jestなどの一般的なテストランナーと組み合わせて使用されることが多いです。

クリーンでシンプルなAPI

APIが簡潔で、複雑なテストシナリオも直感的に記述できるため、初心者でもすぐに使いこなせるようになります。

React Testing Libraryを使うことで、テストの品質が向上し、ユーザーエクスペリエンスを意識した堅牢なアプリケーションを構築できるようになります。

DOM変更の検証が必要な理由

Reactアプリケーションでは、ユーザーインターフェースが頻繁に更新されるため、DOM変更を検証することが不可欠です。これにより、アプリケーションが正しく動作し、期待どおりのユーザー体験を提供していることを保証できます。

バグの早期発見

DOM変更をテストすることで、コードのミスや予期しない動作を迅速に発見できます。特に、複雑な状態管理や条件分岐がある場合は、テストが欠かせません。

UIの安定性を確保

ユーザーの操作に応じたUIの変化（ボタンの有効化、エラーメッセージの表示など）が正しく反映されていることを確認できます。これにより、ユーザーにとってストレスのない体験を提供できます。

リファクタリングや新機能追加の安全性

コードを変更した際に、既存のUIの動作が影響を受けていないかを確認できます。これにより、安心して新機能を追加したり、コードを改善したりできます。

テストが必要な代表的なシナリオ

フォーム送信後のフィードバックメッセージの表示
ボタンをクリックした際のモーダルウィンドウの開閉
フィルタリングや検索結果のリアルタイム更新

React Testing Libraryを使用してDOM変更を検証することは、信頼性の高いReactアプリケーションを開発する上で重要なステップです。

基本的な設定と必要なツールのインストール方法

React Testing Libraryを使用してDOM変更を検証するには、まず環境を整える必要があります。以下の手順で設定を行いましょう。

1. 必要なツールのインストール

React Testing Libraryはnpmまたはyarnでインストールできます。また、Jestやtesting-library/jest-domを一緒に使用することが推奨されます。以下のコマンドを実行してください。

# npmを使用する場合
npm install --save-dev @testing-library/react @testing-library/jest-dom jest

# yarnを使用する場合
yarn add --dev @testing-library/react @testing-library/jest-dom jest

2. Jestの設定

Jestを使用するために、プロジェクトのルートにjest.config.jsを作成します。

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
};

3. testing-library/jest-domのセットアップ

Jest DOMマッチャーを利用するには、setupTests.jsを作成して以下のコードを追加します。

import '@testing-library/jest-dom';

これにより、toBeInTheDocument()やtoHaveTextContent()などの便利なマッチャーを使用できるようになります。

4. テストファイルの命名規則

テストファイルは以下のいずれかの形式で保存するのが一般的です。

*.test.js
*.spec.js

テストファイルは通常、__tests__ディレクトリ内に保存されます。

5. サンプルテストの実行

設定が完了したら、簡単なテストを実行してみましょう。

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

test('renders a heading', () => {
  render(<h1>Hello, World!</h1>);
  expect(screen.getByText('Hello, World!')).toBeInTheDocument();
});

以上の手順を完了すれば、React Testing Libraryを使用してテストを開始する準備が整います。これで、DOM変更を検証するための基盤が構築されました。

DOM変更を検証する基本的なテクニック

React Testing Libraryでは、ユーザー操作や状態の変化に応じたDOMの変更を検証するためのシンプルで効果的な方法が提供されています。ここでは、基本的なテクニックを解説します。

1. 要素のレンダリングを検証する

特定の要素が正しくレンダリングされているかを確認するには、screen.getByTextやscreen.getByRoleを使用します。

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

test('ボタンが表示される', () => {
  render(<button>Click Me</button>);
  expect(screen.getByText('Click Me')).toBeInTheDocument();
});

2. ユーザー操作によるDOM変更を検証する

ユーザーのクリックや入力などの操作を再現するには、fireEventやuserEventを利用します。

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

test('ボタンをクリックするとテキストが表示される', () => {
  const { getByText } = render(
    <div>
      <button onClick={() => document.body.appendChild(document.createElement('p'))}>
        Add Text
      </button>
    </div>
  );
  fireEvent.click(getByText('Add Text'));
  expect(document.querySelector('p')).toBeInTheDocument();
});

3. 属性やスタイルの変更を検証する

要素のクラス名や属性が変化する場合は、toHaveClassやtoHaveAttributeを使用します。

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

test('ボタンにactiveクラスが追加される', () => {
  const { getByRole } = render(
    <button className="active">Click Me</button>
  );
  const button = getByRole('button');
  expect(button).toHaveClass('active');
});

4. コンポーネントの条件付きレンダリングを確認する

状態に応じた条件付きレンダリングが行われているかをテストします。

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

test('ログイン状態によって異なるメッセージが表示される', () => {
  const isLoggedIn = true;
  render(<div>{isLoggedIn ? 'Welcome Back!' : 'Please Log In'}</div>);
  expect(screen.getByText('Welcome Back!')).toBeInTheDocument();
});

5. クリーンアップを確実に行う

React Testing Libraryは、テスト終了時にDOMを自動でクリーンアップしますが、必要に応じて手動で行う場合もあります。

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

afterEach(() => {
  cleanup();
});

これらの基本的なテクニックを組み合わせることで、DOMの変更を効果的に検証できます。次のステップでは、非同期操作を含むシナリオについて詳しく説明します。

非同期DOM操作のテスト

非同期操作はReactアプリケーションで頻繁に使用されます。ユーザー入力やデータの取得などで、DOMの更新が遅延する場合があります。React Testing Libraryは、非同期なDOM変更をテストするための便利な機能を提供しています。

1. 非同期操作の基本的なテスト

非同期操作のテストでは、findByクエリを使用して、非同期でレンダリングされる要素を探します。findByはawaitと組み合わせて使用します。

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

test('非同期に表示されるテキストを確認する', async () => {
  render(<div>{setTimeout(() => (document.body.innerHTML = '<p>Hello, World!</p>'), 1000)}</div>);
  const textElement = await screen.findByText('Hello, World!');
  expect(textElement).toBeInTheDocument();
});

2. API呼び出し後の状態を検証する

APIリクエストの結果を表示する場合、モックしたAPIレスポンスを使用してテストできます。

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

function MockComponent() {
  const [data, setData] = React.useState(null);

  const fetchData = () => {
    setTimeout(() => setData('Fetched Data'), 1000);
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {data && <p>{data}</p>}
    </div>
  );
}

test('API呼び出し後にデータが表示される', async () => {
  render(<MockComponent />);
  userEvent.click(screen.getByText('Fetch Data'));
  const dataElement = await screen.findByText('Fetched Data');
  expect(dataElement).toBeInTheDocument();
});

3. 非同期操作のタイムアウトとエラー処理

非同期操作が期待通りに完了しない場合をテストする際は、適切なエラーハンドリングを検証します。

test('非同期操作でエラーメッセージが表示される', async () => {
  const MockErrorComponent = () => {
    const [error, setError] = React.useState(null);

    const fetchWithError = () => {
      setTimeout(() => setError('Failed to fetch data'), 1000);
    };

    return (
      <div>
        <button onClick={fetchWithError}>Fetch Data</button>
        {error && <p role="alert">{error}</p>}
      </div>
    );
  };

  render(<MockErrorComponent />);
  userEvent.click(screen.getByText('Fetch Data'));
  const errorElement = await screen.findByRole('alert');
  expect(errorElement).toHaveTextContent('Failed to fetch data');
});

4. 非同期操作の待機戦略

非同期テストで重要なのは、DOMが意図した状態に達するまで適切に待つことです。以下のメソッドを活用します：

waitFor: 条件が満たされるまでループで待機します。

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

test('非同期の条件が満たされるまで待つ', async () => {
  render(<div>{setTimeout(() => (document.body.innerHTML = '<p>Loaded</p>'), 1000)}</div>);
  await waitFor(() => expect(screen.getByText('Loaded')).toBeInTheDocument());
});

非同期DOM操作をテストする際は、適切なメソッドを選択することで、リアルなシナリオを忠実に再現できます。これにより、非同期処理の信頼性が確保されます。

カスタムクエリを用いた検証

React Testing Libraryでは、既存のクエリ（getByTextやgetByRoleなど）を活用するのが基本ですが、特定の状況ではカスタムクエリを作成することで、テストを効率化できます。ここでは、カスタムクエリの作成と使用方法を解説します。

1. カスタムクエリの必要性

標準のクエリで複雑な要素を検索するのが困難な場合に、カスタムクエリを利用します。たとえば、要素の属性や特定の構造を基準に要素を検索する場合に役立ちます。

2. カスタムクエリの作成方法

querySelectorやquerySelectorAllを使用して、DOM内の要素をカスタムロジックで取得する関数を作成します。

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

// カスタムクエリ: data-testid 属性に基づく検索
const queryAllByTestIdPrefix = (container, prefix) => {
  return Array.from(container.querySelectorAll(`[data-testid^="${prefix}"]`));
};

const [
  queryByTestIdPrefix,
  getAllByTestIdPrefix,
  getByTestIdPrefix,
  findAllByTestIdPrefix,
  findByTestIdPrefix,
] = buildQueries(
  queryAllByTestIdPrefix,
  (c, id) => `Unable to find an element with data-testid prefix "${id}"`,
  (c, id) =>
    `Found multiple elements with data-testid prefix "${id}"`
);

// エクスポートして他のテストで使用可能にする
export {
  queryByTestIdPrefix,
  getAllByTestIdPrefix,
  getByTestIdPrefix,
  findAllByTestIdPrefix,
  findByTestIdPrefix,
};

3. カスタムクエリの使用方法

カスタムクエリを使用して、特定の要素を検索します。

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

test('カスタムクエリで要素を検索する', () => {
  const { container } = render(
    <div>
      <div data-testid="user-1">User 1</div>
      <div data-testid="user-2">User 2</div>
    </div>
  );
  const element = getByTestIdPrefix(container, 'user');
  expect(element).toHaveTextContent('User 1');
});

4. カスタムクエリのベストプラクティス

カスタムクエリは複雑なシナリオを簡潔に記述するために使用しますが、通常は標準クエリを優先してください。
汎用性のあるカスタムクエリを作成し、再利用可能にすることで、コードの重複を削減できます。
エラーメッセージを明確にすることで、デバッグを容易にします。

5. 実際のシナリオでの使用例

カスタムクエリは、アプリケーションのアクセシビリティ向上やユニークなUI構造を扱う場合に特に有用です。

test('属性を基準にした要素を検索する', () => {
  const { container } = render(
    <div>
      <div data-role="menu-item">Item 1</div>
      <div data-role="menu-item">Item 2</div>
    </div>
  );
  const menuItems = queryAllByAttribute(container, 'data-role', 'menu-item');
  expect(menuItems).toHaveLength(2);
});

カスタムクエリを適切に活用することで、React Testing Libraryをさらに強力なテストツールにすることが可能です。これにより、特定のテストシナリオを効率よく記述できます。

実際のケーススタディ

ここでは、React Testing Libraryを使用してDOM変更を検証する具体的なシナリオを示します。例として、ユーザーがフォームに入力し、送信ボタンをクリックした後に、入力内容がリストに追加されるというシンプルなアプリケーションをテストします。

シナリオの概要

ユーザーがテキストを入力する。
ボタンをクリックすると、入力されたテキストがリストに追加される。
入力後にフォームがクリアされる。

アプリケーションのコード

以下がテスト対象の簡単なReactコンポーネントです。

import React, { useState } from 'react';

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    setTasks([...tasks, input]);
    setInput('');
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add a task"
      />
      <button onClick={addTask} disabled={!input.trim()}>
        Add
      </button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

テストコード

このアプリケーションをテストするためのコードを以下に示します。

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

test('フォームに入力してタスクを追加する', () => {
  render(<TodoApp />);

  // フォームとボタンを取得
  const inputElement = screen.getByPlaceholderText('Add a task');
  const buttonElement = screen.getByText('Add');

  // 初期状態を確認
  expect(screen.queryByText('Test Task')).not.toBeInTheDocument();
  expect(buttonElement).toBeDisabled();

  // 入力してボタンを有効化
  fireEvent.change(inputElement, { target: { value: 'Test Task' } });
  expect(buttonElement).toBeEnabled();

  // ボタンをクリックしてタスクを追加
  fireEvent.click(buttonElement);
  expect(screen.getByText('Test Task')).toBeInTheDocument();

  // 入力フォームがクリアされる
  expect(inputElement.value).toBe('');
});

test('複数のタスクを追加する', () => {
  render(<TodoApp />);

  const inputElement = screen.getByPlaceholderText('Add a task');
  const buttonElement = screen.getByText('Add');

  // タスク1を追加
  fireEvent.change(inputElement, { target: { value: 'Task 1' } });
  fireEvent.click(buttonElement);
  expect(screen.getByText('Task 1')).toBeInTheDocument();

  // タスク2を追加
  fireEvent.change(inputElement, { target: { value: 'Task 2' } });
  fireEvent.click(buttonElement);
  expect(screen.getByText('Task 2')).toBeInTheDocument();

  // リストに2つのタスクが存在する
  const listItems = screen.getAllByRole('listitem');
  expect(listItems).toHaveLength(2);
});

テストのポイント

初期状態の確認: アプリケーションの初期状態が意図通りかをテストします。
ユーザー操作のシミュレーション: fireEventを使って入力やクリックをシミュレーションします。
DOM変更の検証: 入力内容がリストに追加されたことを検証します。
状態のクリア確認: 入力フォームがクリアされたかどうかをチェックします。

結果と学び

このケーススタディを通じて、React Testing Libraryを使ったリアルなテストシナリオの構築方法が学べます。特に、DOM変更がアプリケーションの期待どおりに行われていることを確認するプロセスに焦点を当てています。

テストのベストプラクティス

React Testing Libraryを使用してDOM変更を検証する際に、効率的で効果的なテストを行うためのベストプラクティスを紹介します。これらの指針を守ることで、テストの品質を向上させ、メンテナンス性の高いテストコードを実現できます。

1. ユーザー視点を優先する

React Testing Libraryは、DOMの実装詳細ではなく、ユーザーの行動に近い形でテストを書くことを推奨しています。具体的には、getByRoleやgetByTextなど、アクセシビリティに基づくクエリを使用しましょう。

// 悪い例: 実装詳細に依存
const element = screen.getByTestId('submit-button');

// 良い例: ユーザー視点に近い
const element = screen.getByRole('button', { name: 'Submit' });

2. クリーンアップを自動化する

React Testing Libraryはデフォルトでテスト後にDOMをクリーンアップします。手動でクリーンアップする必要がある場合は、cleanupを明示的に呼び出します。

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

afterEach(() => {
  cleanup();
});

3. 冗長な`waitFor`や`findBy`の使用を避ける

非同期テストでは、明確に必要な場合だけwaitForやfindByを使用します。不要な場合、これらを避けることでテストの実行時間を短縮できます。

// 必要な場合のみ waitFor を使う
await waitFor(() => expect(screen.getByText('Loaded')).toBeInTheDocument());

4. 適切なテスト粒度を維持する

テストは、小さな機能を正確に検証するユニットテストと、全体の動作を確認する統合テストに分けるべきです。一つのテストで複数のシナリオをカバーしすぎることを避けましょう。

5. テストデータを明確に管理する

テストの初期状態をわかりやすく定義し、再現性を保つためにダミーデータを適切に用意します。

const mockData = ['Task 1', 'Task 2'];
render(<TodoApp initialTasks={mockData} />);

6. ネガティブテストを含める

アプリケーションが誤った操作にどのように対応するかを確認することも重要です。たとえば、空のフォーム送信や無効な入力値をテストします。

test('空の入力でボタンが無効になる', () => {
  render(<TodoApp />);
  const button = screen.getByText('Add');
  expect(button).toBeDisabled();
});

7. テストを読みやすく保つ

テストコードはドキュメントの一部です。他の開発者が簡単に理解できるよう、意図を明確に記述します。

test('タスクがリストに追加される', () => {
  // Arrange
  render(<TodoApp />);
  const input = screen.getByPlaceholderText('Add a task');
  const button = screen.getByText('Add');

  // Act
  fireEvent.change(input, { target: { value: 'New Task' } });
  fireEvent.click(button);

  // Assert
  expect(screen.getByText('New Task')).toBeInTheDocument();
});

8. アクセシビリティの確認を組み込む

アクセシビリティはReact Testing Libraryの強みの一つです。axeなどのツールを組み合わせて、テスト中にアクセシビリティ違反をチェックします。

import { axe, toHaveNoViolations } from 'jest-axe';

test('アクセシビリティ違反がないことを確認する', async () => {
  const { container } = render(<TodoApp />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

9. テスト結果のレビューを行う

テストが意図通りのカバレッジを提供しているかを定期的に確認します。これにより、不要なテストや不足しているテストを見つけられます。

10. テストを自動化する

テストを継続的に実行するために、CI/CDパイプラインに統合することを検討してください。これにより、コード変更時に自動でテストが走り、エラーを早期に発見できます。

これらのベストプラクティスを活用することで、テストの信頼性が向上し、より堅牢なReactアプリケーションを構築できます。

応用例と演習問題

ここでは、React Testing Libraryの応用例を紹介し、さらに学びを深めるための演習問題を提供します。実際のプロジェクトでの使用方法を理解し、テストスキルを強化しましょう。

応用例 1: モーダルウィンドウのテスト

モーダルの開閉をテストするシナリオです。

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

function ModalExample() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <div role="dialog">
          <p>Modal Content</p>
          <button onClick={() => setIsOpen(false)}>Close</button>
        </div>
      )}
    </div>
  );
}

test('モーダルの開閉をテストする', () => {
  render(<ModalExample />);
  const openButton = screen.getByText('Open Modal');
  fireEvent.click(openButton);
  expect(screen.getByRole('dialog')).toBeInTheDocument();
  fireEvent.click(screen.getByText('Close'));
  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});

応用例 2: API呼び出しとローディング状態のテスト

APIからデータを取得する際のローディング状態とデータの表示をテストします。

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

function FetchDataExample() {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  const fetchData = async () => {
    setLoading(true);
    setTimeout(() => {
      setData('Fetched Data');
      setLoading(false);
    }, 1000);
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {loading ? <p>Loading...</p> : data && <p>{data}</p>}
    </div>
  );
}

test('API呼び出しとローディング状態をテストする', async () => {
  render(<FetchDataExample />);
  const fetchButton = screen.getByText('Fetch Data');

  userEvent.click(fetchButton);
  expect(screen.getByText('Loading...')).toBeInTheDocument();

  const dataElement = await screen.findByText('Fetched Data');
  expect(dataElement).toBeInTheDocument();
  expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
});

演習問題

カスタムフォームの検証
ユーザーが複数のフィールドを入力し、「送信」ボタンをクリックした後、入力内容が要約として表示されるフォームを作成し、テストコードを書いてください。
非同期削除機能のテスト
リスト内の項目を削除するボタンを実装し、削除ボタンをクリックした後に項目がリストから消えることを検証してください。
テーマ切り替えのテスト
ライトテーマとダークテーマを切り替えるトグルボタンを実装し、切り替え後にテーマが正しく反映されることを確認するテストを書いてください。

解答例と学び

演習問題を解くことで、React Testing Libraryの実践的な使い方を学べます。特に、ユーザー視点を意識したテストや非同期処理の検証スキルが向上します。ぜひこれらの問題に取り組み、テストスキルをさらに磨いてください。

まとめ

本記事では、React Testing Libraryを使用したDOM変更の検証方法について、基本から応用例までを解説しました。
React Testing Libraryを活用することで、ユーザー視点に基づく高品質なテストが実現し、Reactアプリケーションの信頼性を大幅に向上させることができます。
基本的な使い方から、非同期操作の検証、カスタムクエリの作成、さらにモーダルやAPI呼び出しの応用例まで、幅広いシナリオを学ぶことができました。

適切なテストを行うことで、バグの発見・修正が効率化し、安定したアプリケーション開発が可能になります。これを機に、React Testing Libraryを活用したテストスキルをさらに磨いてください。