Reactで、モックサーバにMSWを使う

はじめに

最近、プロジェクトでReactを使うということで、改めて整理を始めたところです。
一応、以前のプロジェクトで利用したことはあるものの、私自身はそれほど技術選定にも関わらず２機能くらい実装しただけで、すっかり忘れてしまっています。

また、モックサーバについては、MSWも選択肢としては上がったものの最終的にJSON Serverを利用したこともあり、MSWに関する知識は皆無です。

で、改めて調査を始めたところ、結構古い記事が多いのと、バージョン２で破壊的変更がされたようでそのままでは動かないものが多数あったので、改めて記事を書くことにしました。

MSWって

MSW（Mock Service Worker）は、フロントエンドのテストに使用されるモックライブラリです。MSWは、Service Workerを利用してブラウザ上で動作し、実際のAPIエンドポイントにリクエストを送らずにレスポンスを返すことで、バックエンドが未完成の場合でもフロントエンドの開発を進められます。

MSWの主な機能

• APIリクエストのモック：HTTPリクエストをキャッチして、指定したレスポンスを返却
• 開発とテストに適応：フロントエンドの開発中やテスト環境でのみモックを有効にすることができる
• レスポンスの遅延：APIのレスポンスに遅延を加えることで、ネットワークの遅延をシミュレーションし、UXのテストが可能
• 条件分岐のモック：リクエストのパラメータやパスに基づいて、異なるレスポンスを返すことができる

環境

React 18.3.1
axios 1.7.7
msw 2.6.0

やってみる

インストール

環境はできている前提で、以下のコマンドでインストールします。

npm install -D msw

mockServiceWorker.jsを作る

まず、MSWを実行するためには、mockServiceWorker.jsが必要になるので、
このファイルを生成します。これで準備完了

npx msw init public/ --save

handlers.ts

モック化したいAPIをこのHandlerに追加していきます。
詳細は割愛しますが、delayで遅延を入れることもできるので、UIの確認に有用だと思います。

src/mocks/handlers.ts

import { http, delay, HttpResponse } from 'msw'

export const handlers = [
  http.get('/api/user', () => {
    return HttpResponse.json({
      id: '123',
      firstName: 'John',
      lastName: 'Doe',
    })
  }),  
  http.get('https://api.example.com/data', async() => {
    await delay(1000);
    // モックデータを定義
    const mockData = [
      { id: 1, name: 'Item 1', address: 'test1', tel: '999-9999-9999' },
      { id: 2, name: 'Item 2', address: 'test2', tel: '888-8888-8888' },
      { id: 3, name: 'Item 3', address: 'test3', tel: '777-7777-7777' },
    ];

    return HttpResponse.json(mockData);
  }),
    // 他のエンドポイントもここに追加できます
];

browser.ts

モックサーバーをブラウザでセットアップするためのものです。

src/mocks/browser.ts

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
 
export const worker = setupWorker(...handlers);

main.tsx

最後に、main.tsxで、開発モードの場合のみ、MSWを有効かするようにします。

src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App.tsx";

async function enableMocking() {
  if (import.meta.env.MODE !== "development") {
    return;
  }

  const { worker } = await import("./mocks/browser");

  return worker.start({
    onUnhandledRequest: "bypass", // もしくは 'warn' または 'error'
  });
}

enableMocking().then(() => {
  createRoot(document.getElementById("root")!).render(
    <StrictMode>
      <Router>
        <App />
      </Router>
    </StrictMode>
  );
});

最後に

これで、無事APIのモック化ができて、ローカルでの開発がスムーズに進められそうです。
MSWの機能については、公式ドキュメントもあるので、そちらを見ながら、順次試していこうと思います。