MENU
  1. ホーム
  2. React
  3. ReactでJestとMSWを使ったAPIモックと統合テストの完全ガイド

ReactでJestとMSWを使ったAPIモックと統合テストの完全ガイド

React

React開発でAPIとの連携は重要な役割を果たしますが、これに関連する統合テストの実装はしばしば課題となります。本記事では、ReactでのAPIモックと統合テストの効率的な手法を紹介します。特に、JestとMSW（Mock Service Worker）を活用することで、テストの信頼性を高めつつ、開発フローをスムーズに進める方法を具体例を交えて解説します。テスト環境のセットアップから実践的な応用例まで、初心者にも分かりやすく網羅しますので、統合テストの理解と実践に役立ててください。

目次

テスト環境の準備と基本セットアップ


ReactプロジェクトでJestとMSWを使用するには、まず適切な環境をセットアップする必要があります。以下はその手順の概要です。

Jestのインストールと設定


ReactアプリにJestを追加するには、以下の手順を実行します。

Jestのインストール


プロジェクトのディレクトリで次のコマンドを実行します。

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

テストスクリプトの設定


package.json に次のスクリプトを追加します。

"scripts": {
  "test": "jest"
}

MSWのインストールと設定


次に、MSWをインストールして設定します。

MSWのインストール


以下のコマンドを実行してMSWをインストールします。

npm install msw --save-dev

モックハンドラの作成


src/mocks/handlers.js ファイルを作成し、モックAPIのハンドラを定義します。

import { rest } from 'msw';

export const handlers = [
  rest.get('/api/data', (req, res, ctx) => {
    return res(ctx.json({ key: 'value' }));
  }),
];

MSWのサービスワーカーセットアップ


src/mocks/browser.js ファイルを作成してサービスワーカーを設定します。

import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

サービスワーカーの起動


開発環境でサービスワーカーを起動するには、src/index.js の最初に以下を追加します。

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser');
  worker.start();
}

セットアップ完了


これで、JestとMSWを使用するための基本的な環境が整いました。次のステップでは、MSWを使ったAPIモックの基本を解説します。

MSWによるAPIモックの基礎


MSW（Mock Service Worker）は、ブラウザやNode.js環境でAPIリクエストを模擬するための強力なツールです。このセクションでは、MSWを使用したAPIモックの基本を解説します。

APIモックの仕組み


MSWは、APIリクエストをキャッチしてモックレスポンスを返すことで、サーバーとの通信をエミュレートします。これにより、バックエンドが未完成な状態でも、フロントエンドの開発やテストを進めることが可能です。

モックハンドラの作成


モックハンドラを使って、APIリクエストに対するモックレスポンスを定義します。
以下は、GET /api/data のリクエストをモックする例です。

import { rest } from 'msw';

export const handlers = [
  rest.get('/api/data', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({ message: 'Mocked response data' })
    );
  }),
];

ハンドラの構成

  • rest.get()：HTTPメソッドとエンドポイントを指定します。
  • req：リクエストオブジェクト（パラメータやヘッダーにアクセス可能）。
  • res：レスポンスを生成します。
  • ctx：レスポンスの内容（ステータス、JSONなど）を定義します。

サービスワーカーの起動


作成したハンドラを利用するには、サービスワーカーを起動する必要があります。

ブラウザ環境での起動


開発環境でMSWを使用するには、src/index.js に以下を追加します。

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser');
  worker.start();
}

Node.js環境での起動（Jest用）


Jestのテスト環境でサービスワーカーを起動するには、jest.setup.js ファイルを作成します。

import { server } from './mocks/server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

モックを活用したAPIリクエストの確認


アプリケーションを実行し、GET /api/data にリクエストを送信すると、モックレスポンスが返されます。この仕組みを用いて、テストやデバッグが効率的に行えます。

次のセクションでは、Jestを使用した基本的なテストケースの作成方法を解説します。

Jestでのテストケース作成と実行方法


Jestは、Reactアプリケーションのテストに広く使用されるJavaScriptのテスティングフレームワークです。このセクションでは、Jestを使用した基本的なテストケースの作成方法と実行手順を説明します。

テストファイルの作成


Jestのテストは通常、__tests__ ディレクトリ内や .test.js / .spec.js の拡張子を持つファイルで記述します。以下にサンプルテストケースを示します。

基本的なReactコンポーネントのテスト


以下は、シンプルなReactコンポーネントのテスト例です。

コンポーネントファイル: src/components/Hello.js

import React from 'react';

const Hello = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Hello;

テストファイル: src/components/Hello.test.js

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

test('renders the correct greeting message', () => {
  render(<Hello name="World" />);
  const greetingElement = screen.getByText(/Hello, World!/i);
  expect(greetingElement).toBeInTheDocument();
});

テストの実行


作成したテストを実行するには、以下のコマンドを使用します。

npm test

実行結果の確認


ターミナルに以下のような結果が表示されます。

PASS  src/components/Hello.test.js
✓ renders the correct greeting message (5ms)

非同期処理のテスト


非同期APIをテストする場合、Jestのasync/awaitを使用して非同期コードを検証します。

非同期コンポーネント: src/components/AsyncHello.js

import React, { useState, useEffect } from 'react';

const AsyncHello = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    setTimeout(() => {
      setMessage('Hello, Async World!');
    }, 1000);
  }, []);

  return <h1>{message}</h1>;
};

export default AsyncHello;

テストファイル: src/components/AsyncHello.test.js

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

test('renders async greeting message', async () => {
  render(<AsyncHello />);
  const asyncGreetingElement = await waitFor(() =>
    screen.getByText(/Hello, Async World!/i)
  );
  expect(asyncGreetingElement).toBeInTheDocument();
});

コードカバレッジの確認


Jestはテストのコードカバレッジを簡単に確認することができます。以下のコマンドを実行してください。

npm test -- --coverage

結果はターミナルに表示され、カバレッジレポートが生成されます。

次のセクションでは、MSWとJestを組み合わせた実践的なテスト方法を解説します。

MSWとJestを組み合わせた実践的なテスト


JestとMSWを連携させることで、APIモックを活用した統合テストを効率的に実装できます。このセクションでは、MSWを使用してAPIリクエストをモックし、Jestでその動作をテストする方法を解説します。

実践例: モックAPIを使ったReactコンポーネントのテスト


以下は、外部APIからデータを取得して表示するReactコンポーネントの例とそのテストケースです。

コンポーネントファイル: src/components/UserList.js

import React, { useEffect, useState } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

モックハンドラ: src/mocks/handlers.js

import { rest } from 'msw';

export const handlers = [
  rest.get('/api/users', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
      ])
    );
  }),
];

テストファイル: src/components/UserList.test.js

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { server } from '../../mocks/server';
import UserList from './UserList';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('renders a list of users fetched from the API', async () => {
  render(<UserList />);

  const userListItems = await waitFor(() => screen.getAllByRole('listitem'));
  expect(userListItems).toHaveLength(2);
  expect(userListItems[0]).toHaveTextContent('Alice');
  expect(userListItems[1]).toHaveTextContent('Bob');
});

重要なポイント

サービスワーカーのセットアップ

  • Jest環境でMSWを使用する場合、テストのセットアップファイルでサービスワーカーを起動します。
  • jest.setup.js で server.listen() などを呼び出して、テスト開始前にモックハンドラを登録します。

非同期処理のテスト

  • APIリクエストは非同期処理であるため、JestのwaitForやasync/awaitを使用してレスポンスを待機します。

テスト結果の検証

  • screen.getAllByRole() を使ってリストアイテムを取得し、期待される数と内容が正しいかを確認します。

エラーケースのテスト


エラーレスポンスをシミュレートして、例外処理やエラーメッセージの表示を確認するテストも重要です。

エラーハンドラの追加

rest.get('/api/users', (req, res, ctx) => {
  return res(ctx.status(500));
});

エラーテストの例

test('displays an error message when the API request fails', async () => {
  server.use(
    rest.get('/api/users', (req, res, ctx) => {
      return res(ctx.status(500));
    })
  );

  render(<UserList />);
  const errorMessage = await waitFor(() =>
    screen.getByText(/failed to load users/i)
  );
  expect(errorMessage).toBeInTheDocument();
});

まとめ


MSWとJestを組み合わせることで、実際のAPIに依存しない信頼性の高いテストが可能になります。モックレスポンスを使えば、多様なシナリオを迅速かつ効率的にテストできます。次のセクションでは、エラー処理と例外ケースのテストをさらに詳しく解説します。

エラー処理と例外ケースのテスト


Reactアプリケーションでは、エラー処理が重要な役割を果たします。APIの応答が失敗した場合や予期しない例外が発生した場合でも、ユーザーに適切なフィードバックを提供する必要があります。このセクションでは、エラー処理と例外ケースを対象としたテスト方法を解説します。

例外ケースを想定したReactコンポーネント


以下は、APIエラー時にエラーメッセージを表示するReactコンポーネントの例です。

コンポーネントファイル: src/components/UserListWithError.js

import React, { useEffect, useState } from 'react';

const UserListWithError = () => {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/users')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch users');
        }
        return response.json();
      })
      .then((data) => setUsers(data))
      .catch((err) => setError(err.message));
  }, []);

  if (error) {
    return <div role="alert">Error: {error}</div>;
  }

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserListWithError;

エラーレスポンスのモック


エラーケースをテストするために、MSWのハンドラをエラーレスポンスを返すように変更します。

エラー用モックハンドラ

rest.get('/api/users', (req, res, ctx) => {
  return res(ctx.status(500), ctx.json({ message: 'Internal Server Error' }));
});

エラー処理のテスト


エラー時にエラーメッセージが正しく表示されるかを確認します。

テストファイル: src/components/UserListWithError.test.js

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { server } from '../../mocks/server';
import UserListWithError from './UserListWithError';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('displays an error message when the API request fails', async () => {
  server.use(
    rest.get('/api/users', (req, res, ctx) => {
      return res(ctx.status(500), ctx.json({ message: 'Internal Server Error' }));
    })
  );

  render(<UserListWithError />);
  const alertElement = await waitFor(() => screen.getByRole('alert'));
  expect(alertElement).toHaveTextContent('Error: Failed to fetch users');
});

例外シナリオのテスト


想定外のエラーが発生した場合の動作を確認することも重要です。以下に例を示します。

エラーハンドラの追加（例外シナリオ）

server.use(
  rest.get('/api/users', (req, res, ctx) => {
    throw new Error('Unexpected error');
  })
);

例外シナリオのテスト

test('handles unexpected exceptions gracefully', async () => {
  server.use(
    rest.get('/api/users', (req, res, ctx) => {
      throw new Error('Unexpected error');
    })
  );

  render(<UserListWithError />);
  const alertElement = await waitFor(() => screen.getByRole('alert'));
  expect(alertElement).toHaveTextContent('Error: Unexpected error');
});

エラーメッセージの多言語対応


エラーメッセージを多言語対応にする場合、テストで複数の言語のメッセージを検証する必要があります。その際にはモックデータに動的な言語設定を加える方法が有効です。

まとめ


エラー処理と例外ケースをテストすることで、アプリケーションの堅牢性とユーザー体験が向上します。MSWとJestを活用すれば、さまざまなエラーシナリオを迅速かつ効率的に模擬してテストすることが可能です。次のセクションでは、非同期処理のテストに特化した方法を解説します。

非同期処理のテストと注意点


Reactアプリケーションでは、非同期処理を伴うAPI呼び出しが一般的です。非同期処理のテストには特有の注意点があり、適切に設計しないと、テストの信頼性が低下する可能性があります。このセクションでは、非同期処理のテスト方法とポイントを解説します。

非同期処理を含むReactコンポーネント


以下は、非同期にデータを取得して表示するコンポーネントの例です。

コンポーネントファイル: src/components/DataFetcher.js

import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/data')
      .then((response) => response.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return <div>{data.message}</div>;
};

export default DataFetcher;

非同期処理のテスト手法


非同期テストでは、以下の点に注意が必要です。

1. `async/await` を使用


非同期処理が完了するのを待つために、Jestのasync/await構文を活用します。

2. `waitFor` の使用


非同期処理後にDOMが更新される場合、waitFor を使用してその状態を検証します。

テストファイル: src/components/DataFetcher.test.js

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { server } from '../../mocks/server';
import DataFetcher from './DataFetcher';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('renders data after fetching', async () => {
  render(<DataFetcher />);

  // ローディングメッセージが表示されるか確認
  expect(screen.getByText('Loading...')).toBeInTheDocument();

  // 非同期処理完了後のデータ表示を確認
  const dataElement = await waitFor(() => screen.getByText(/Mocked response data/i));
  expect(dataElement).toBeInTheDocument();
});

3. タイムアウトの管理


非同期処理が長時間かかる場合、Jestのデフォルトタイムアウトを変更する必要があります。

タイムアウト設定の例

jest.setTimeout(10000); // 10秒に設定

非同期処理特有の問題と対策

問題: 状態の競合


非同期APIが複数回呼び出されると、状態の競合が発生する可能性があります。
対策: モックAPIのレスポンスを一貫性のあるデータにするか、リクエスト数を制御します。

問題: 不確定なDOM更新


DOMの状態が非同期に更新されるため、期待する結果を正確に検証できないことがあります。
対策: waitForやfindByメソッドを利用し、非同期の完了を待機します。

エッジケースのテスト


非同期処理で以下のエッジケースもカバーしましょう。

  • 空のレスポンス
  • レスポンスが遅い場合のUI表示
  • サーバーエラーの発生時

エッジケースのテスト例

test('displays fallback message on empty response', async () => {
  server.use(
    rest.get('/api/data', (req, res, ctx) => {
      return res(ctx.status(200), ctx.json({ message: '' }));
    })
  );

  render(<DataFetcher />);
  const fallbackMessage = await waitFor(() => screen.getByText(/No data available/i));
  expect(fallbackMessage).toBeInTheDocument();
});

まとめ


非同期処理のテストでは、適切なツールと方法を使用することで、テストの正確性を確保できます。JestとMSWを組み合わせれば、複雑な非同期シナリオにも柔軟に対応可能です。次のセクションでは、テスト結果のデバッグと改善方法を詳しく説明します。

テスト結果のデバッグと改善方法


テストを実行した際にエラーや失敗が発生する場合、迅速にデバッグして解決することが重要です。このセクションでは、Jestを使用したテストのデバッグ手法と、テストを改善するための具体的な方法を解説します。

デバッグの基本手法

1. コンソールログを活用


テスト中の値や状態を確認するために、console.log を適切に使用します。
例:

test('logs fetched data for debugging', async () => {
  render(<DataFetcher />);

  // 非同期データを取得
  await waitFor(() => {
    const dataElement = screen.getByText(/Mocked response data/i);
    console.log(dataElement.textContent); // デバッグ用
    expect(dataElement).toBeInTheDocument();
  });
});

2. テスト失敗時のスナップショット


debug() を使用して、現在のDOM構造を出力します。
例:

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

test('displays debug output on failure', async () => {
  const { debug } = render(<DataFetcher />);
  debug(); // テスト時のDOM構造をコンソールに出力
});

3. Jestの詳細オプションを利用


Jestの--verboseオプションを使用して、テストの詳細な実行状況を確認します。

npm test -- --verbose

失敗するテストの原因分析

原因1: 非同期処理のタイミング


非同期処理が完了する前にアサーションが実行されると、テストが失敗します。
対策: waitFor や findBy メソッドを使用して、非同期処理が完了するまで待機します。

原因2: 不正なモックレスポンス


MSWのモックレスポンスがテストで期待されるデータと一致していない場合、テストが失敗します。
対策: モックハンドラのレスポンスをテストケースごとに適切に設定します。

原因3: テスト環境の不備


例えば、サービスワーカーが正しく設定されていない場合、APIリクエストがキャッチされないことがあります。
対策: サービスワーカーが正しく動作していることを確認します。

テストの改善方法

1. 再利用可能なユーティリティの作成


共通のセットアップコードをテストユーティリティとして抽出し、コードの重複を削減します。
例:

const renderWithProviders = (ui) => {
  return render(ui, { wrapper: MyProvider });
};

2. カバレッジレポートの活用


Jestのカバレッジレポートを使用して、テストされていないコードを特定します。

npm test -- --coverage

3. テストケースの粒度を調整

  • 大きすぎる場合: テストが失敗すると原因が特定しにくくなります。
  • 小さすぎる場合: 冗長なコードが増える可能性があります。

JestとMSWのデバッグの特有のポイント

MSWハンドラの動作確認


特定のリクエストが正しくキャッチされているかを確認するために、MSWのonUnhandledRequestオプションを活用します。

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

const server = setupServer(...handlers);

server.listen({
  onUnhandledRequest: (req) => {
    console.warn(`Unhandled request: ${req.method} ${req.url}`);
  },
});

レスポンスデータのログ出力


モックAPIのレスポンス内容を確認することで、モックデータの整合性をチェックします。

まとめ


テスト結果のデバッグと改善を通じて、テストの信頼性と効率を向上させることができます。JestとMSWの特徴を活かし、迅速に問題を特定して解決しましょう。次のセクションでは、カスタムフックやReduxなど、より高度な応用例を紹介します。

応用例: カスタムフックやReduxのテスト


React開発では、カスタムフックやReduxを使用した状態管理が一般的です。これらの機能をテストすることで、アプリケーション全体の品質を向上させることができます。このセクションでは、カスタムフックやReduxのテストの具体的な方法を解説します。

カスタムフックのテスト


カスタムフックをテストする場合、@testing-library/react-hooks パッケージを利用すると効率的です。

カスタムフックの例


以下は、データを取得するカスタムフックの例です。
カスタムフック: src/hooks/useFetchData.js

import { useState, useEffect } from 'react';

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((err) => setError(err));
  }, [url]);

  return { data, error };
};

export default useFetchData;

カスタムフックのテスト


以下は、useFetchData をテストする例です。
テストファイル: src/hooks/useFetchData.test.js

import { renderHook } from '@testing-library/react-hooks';
import { server } from '../../mocks/server';
import useFetchData from './useFetchData';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('fetches data successfully', async () => {
  const { result, waitForNextUpdate } = renderHook(() =>
    useFetchData('/api/data')
  );

  await waitForNextUpdate();

  expect(result.current.data).toEqual({ message: 'Mocked response data' });
  expect(result.current.error).toBeNull();
});

test('handles fetch error', async () => {
  server.use(
    rest.get('/api/data', (req, res, ctx) => {
      return res(ctx.status(500));
    })
  );

  const { result, waitForNextUpdate } = renderHook(() =>
    useFetchData('/api/data')
  );

  await waitForNextUpdate();

  expect(result.current.data).toBeNull();
  expect(result.current.error).toBeTruthy();
});

Reduxのテスト


Reduxを使用した状態管理のテストでは、Mock Storeを活用すると簡単です。

Reduxストアとアクションの例


アクション: src/store/actions.js

export const fetchDataSuccess = (data) => ({
  type: 'FETCH_DATA_SUCCESS',
  payload: data,
});

リデューサー: src/store/reducer.js

const initialState = { data: null };

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_SUCCESS':
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

export default reducer;

Reduxのテスト


以下は、Reduxの状態管理をテストする例です。
テストファイル: src/store/reducer.test.js

import reducer from './reducer';
import { fetchDataSuccess } from './actions';

test('handles FETCH_DATA_SUCCESS action', () => {
  const initialState = { data: null };
  const action = fetchDataSuccess({ message: 'Mocked response data' });

  const newState = reducer(initialState, action);

  expect(newState.data).toEqual({ message: 'Mocked response data' });
});

統合テスト: カスタムフックとReduxの連携


カスタムフックとReduxを組み合わせた統合テストも重要です。この場合、<Provider> コンポーネントを使用して、Reduxストアをテスト環境に提供します。

統合テストの例

import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

test('renders data fetched with Redux', async () => {
  render(
    <Provider store={store}>
      <App />
    </Provider>
  );

  const dataElement = await screen.findByText(/Mocked response data/i);
  expect(dataElement).toBeInTheDocument();
});

まとめ


カスタムフックやReduxのテストを行うことで、複雑な状態管理のバグを未然に防ぎ、アプリケーションの信頼性を高めることができます。次のセクションでは、これまでの内容を総括し、Reactにおけるテストのベストプラクティスを振り返ります。

まとめ


本記事では、ReactアプリケーションにおけるJestとMSWを使用したAPIモックと統合テストの実装方法を詳しく解説しました。基本的なセットアップからMSWを活用したAPIモックの作成、Jestを使用した非同期処理やエラー処理のテスト、さらにカスタムフックやReduxのテストまで、多岐にわたる内容を網羅しました。

JestとMSWを組み合わせることで、実際のAPIに依存しないテスト環境を構築し、開発効率とテストの信頼性を向上させることができます。これらのツールを活用し、堅牢でメンテナンス性の高いReactアプリケーションを構築してください。

React
React 統合テスト Jest APIモック MSW

コメント

コメントする

目次