MSW2.0(Mock Service Worker)の使い方 ~①環境構築編~

はじめに

APIモックサーバーといってもjson-server等ありますが、実務でmswを導入してみて便利だったので紹介します。

msw1.0 → msw2.0で破壊的変更が行われていて、1.0の書き方だと動作せず、2.0について書かれているサイトがあまりなかったので、書いてみました。

mswについての記事は、2部構成となっております。

環境構築編　←　本記事の内容
実践編　←　MSW2.0(Mock Service Worker)の使い方 ~②実践編~

本記事で学べる事

mswの導入方法

mswとは

msw(Mock Service Worker)とは、APIのモックサーバーを作成するためのJavaScriptライブラリです。

ブラウザリクエストをインターセプトし、任意のレスポンスを返すことが出来ます。

mswを使ってモックを作成することで、APIサーバーが完成する前にフロントエンド開発を進めることができます。

動作環境

Node: v20.7.0
Vite: ^5.2.0
React(TypeScript): ^18.2.0
msw: ^2.2.3
swr: ^2.2.5

導入方法

React & mswインストール

今回は、ビルドツールとしてViteを利用してます。

npm create vite@latest react-msw-sample-app -- --template react-ts
cd react-msw-sample-app
npm i
npm install msw@latest --save-dev

handlerの作成
```
cd src
mkdir mocks
cd mocks
touch handlers.ts
```
handlers.tsに以下のコードを記述してください。
handlers の中に、apiモックを定義していきます。
以下コードは、GET /resource に対するリクエストをインターセプトし、{text: "Hello World"}を返す例
```
// src/mocks/handlers.ts
import { HttpResponse, http } from 'msw'

export const handlers = [
  http.get('/resource', () => {
    return HttpResponse.json({text: "Hello World"})
  }),
]
```

workerの作成

browser.tsファイルを作成し、workerの定義を記述します

// src/mocks/browser.ts
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

main.tsxにworker起動用コード追加

handlerを定義するファイルを作成します。

...
async function enableMocking() {
  if (process.env.NODE_ENV !== "development") {
    return;
  }

  const { worker } = await import("./mocks/browser");
  
  return worker.start({
    onUnhandledRequest: "bypass",
  });
}

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

デフォルトのままworkerを起動すると、対応するリクエストハンドラが見つからなかった場合に

[MSW] Warning: intercepted a request without a matching request handler:

とブラウザ上でWarningが出てしまうので、worker.startのオプションに、onUnhandledRequest: "bypass"　を設定しています。

mswの初期化コマンド実行
publicフォルダが配置されているディレクトリにて、以下コマンドを実行すると、指定したディレクトリ（public）に mockServiceWorker.js ファイルが生成されます。
生成されたファイルは、サービスワーカーにモックサーバーを登録します。
これにより、アプリケーション内のapiリクエストをインターセプトして、モックされたレスポンスを返すことができます。
```
npx msw init ./public
```

動作確認

動作確認用に今回は、非同期関数用ライブラリとしてswrを利用します。

※swrについての説明は省略します。

swrのインストール
npm i swr

App.tsxの修正

src/App.tsxの内容を以下のコードに書き換えます

import "./App.css";
import useSWR from "swr";

type ResponseData = {
  text: string;
};

function App() {
  const fetcher = (url: string) => fetch(url).then((res) => res.json());

  const { data, isLoading, error } = useSWR<ResponseData>("/resource", fetcher);

  if (error) {
    return <p>error</p>;
  }

  if (isLoading) {
    return (<p>Loading now...</p>)
  }

  return <p>取得データ: {data?.text}</p>;
}

export default App;

npm run devを実行し、ブラウザ上にアクセスして以下画面が出れば完了です。