Reactでaxios-mock-adapterを使ってAPIをモック化する方法-スケ郎のお話

はじめに

Reactアプリケーションを開発する際、APIのレスポンスをモック化することで、バックエンドが未完成の状態でもフロントエンドの開発を進めることができます。その際に便利なのが「axios-mock-adapter」です。

axios はWEBアプリやNode.jsアプリで簡単にHTTPリクエストを送信するライブラリです。その axios のリクエストをモック化できるのが axios-mock-adapter です。本記事では、axios-mock-adapter を利用してクライアントサイドのAPIをモック化する方法を紹介します。

環境設定

まずは、必要なパッケージをインストールしましょう。

npm install axios axios-mock-adapter

または、yarnを使用する場合は以下のコマンドを実行します。

yarn add axios axios-mock-adapter

axios-mock-adapterの基本的な使い方

以下の手順でAPIのモックを設定できます。

axios-mock-adapter でAPIモックの実装
アプリ起動時にAPIモックを有効化
axiosを使ってAPIを実行するコンポーネントを実装

APIモックの実装例

mock/mockapi.tsにモックAPIを実装します。作成するファイルの場所や名前は任意です。

import axios from "axios";
import MockAdapter from "axios-mock-adapter";

export const mockStart = () => {

  // MockAdapter インスタンスを作成
  const mockAxios = new MockAdapter(axios);

  // モックAPIの設定
  mockAxios.onGet('/users').reply(200, {
    users: [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
    ],
  });
};

アプリ起動時にAPIモックを有効化

起動時にモックAPIが適用されるように、main.jsxに mockStart を呼び出す行を追加します。

import { mockStart } from './mock/mockapi.ts';

mockStart();  // これを追加

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

このコードを実行すると、実際のAPIにアクセスすることなく、モックデータを取得できます。

Reactコンポーネントの実装

次にAPIを実行するコンポーネント側の実装をします。といっても、APIを実行する際の書き方は、通常の axios を使ったAPIアクセスと変わりません。

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

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

  useEffect(() => {
    axios.get('/users')
      .then(response => setUsers(response.data.users))
      .catch(error => console.error(error));
  }, []);

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

export default UserList;

このコンポーネントは、useEffect を使って /users エンドポイントにリクエストを送信し、取得したデータをリスト表示します。APIをモック化しているため、リクエストは実際のサーバーには送信されず、上で設定したモックデータがレスポンスに設定されます。

POST・PUT・DELETEをモック化する

axios-mock-adapter では、GETリクエストだけでなく、POST、PUT、DELETEなどのリクエストもモック化できます。

POSTリクエストのモック

mock.onPost('/users').reply(201, {
  id: 3,
  name: 'Alice Johnson'
});

このコードでは、新しいユーザーを作成するAPIのレスポンスをモック化しています。リクエストが送信されると、201ステータスとともに新しいユーザー情報を返します。

PUTリクエストのモック

mock.onPut('/users/1').reply(200, {
  id: 1,
  name: 'John Doe Updated'
});

この例では、ID 1 のユーザー情報を更新するリクエストをモック化しています。

DELETEリクエストのモック

mock.onDelete('/users/1').reply(204);

DELETEリクエストでは、204ステータスコードを返すことで削除成功を表現できます。

axios-mock-adapterの便利な機能

axios-mock-adapterは、APIのレスポンスをモック化するだけでなく、HTTP 500などのエラーの再現や、レスポンスを意図的に遅延させて、ローディング状態の再現することも可能です。また、フロントエンド側のユニットテストにも利用可能です。

エラーハンドリングのモック

以下のようなモックを定義することで、/usersにアクセスされた際に、意図的にHTTP 500エラーを返します。これにより、エラーハンドリングの動作を確認できます。

mock.onGet('/users').reply(500, { message: 'Internal Server Error' });

レスポンスの遅延を設定する方法

APIレスポンスの遅延を設定することで、ローディング状態のテストが可能です。

一律で遅延を適用したい時は、axios-mock-adapter のインスタンス作成時に delayResponse オプションを指定すると、すべてのリクエストに遅延を適用できます。

const mockAxios = new MockAdapter(axios, { delayResponse: 1500 }); // 全APIのレスポンスを1.5秒遅延

特定のエンドポイントに対してのみ遅延を適用する場合は、.withDelayInMs() メソッドを使用します。

mockAxios.onGet('/users').withDelayInMs(10000).reply(200, {
  users: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Smith' },
  ],
}); // '/users' のレスポンスを10秒遅延

このコードでは、/users エンドポイントのレスポンスを 10 秒遅延させることで、ローディング状態のテストやタイムアウト処理の確認が可能になります。

まとめ

axios-mock-adapter を使えば、APIのモックを簡単に作成でき、バックエンドの準備が整っていない段階でもスムーズに開発を進めることができます。

特に、Reactの開発時には、コンポーネントの動作確認やエラーハンドリングのテストに役立つため、積極的に活用してみてください！

Reactでaxios-mock-adapterを使ってAPIをモック化する方法