Mock Service Worker(MSW) を使ってモックサーバーを用意する

やること

今回は Angular チュートリアルの Tour of Heroes で使っている Angular in-memory-web-api を Mock Service Worker に置き換えていく。

Mock Service Worker(MSW) とは

MSW – Seamless API mocking library for browser and Node | Mock Service Worker

実際のリクエストをインターセプトする API mock ライブラリ。 Service Worker を利用しているのでモダンブラウザであれば使用可能。

Angular アプリケーションへの導入

基本的には Getting Started 通りに導入できる。

何はともあれ、パッケージをインストールする。

$ yarn add msw --dev

次に src/mocks/handlers.ts を配置する。 今回は REST API をモックするので Mocking REST API の通りに進める。 Tour of Heroes の GET /api/heroes をモックする場合は以下のようになる。

// src/mocks/handlers.ts
import { rest } from 'msw';

export const handlers = [
  rest.get('/api/heroes', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([
        { id: 11, name: 'Dr Nice' },
        { id: 12, name: 'Narco' },
        { id: 13, name: 'Bombasto' },
        { id: 14, name: 'Celeritas' },
        { id: 15, name: 'Magneta' },
        { id: 16, name: 'RubberMan' },
        { id: 17, name: 'Dynama' },
        { id: 18, name: 'Dr IQ' },
        { id: 19, name: 'Magma' },
        { id: 20, name: 'Tornado' },
      ]),
    );
  }),
];

下記のコマンドで worker のコードをプロジェクトに配置。

$ npx msw init src/ --save

Angular アプリの場合は上のコードを読み込むために angular.json で build architect の assets に mockServiceWorker.js をセットする必要がある。

             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/mockServiceWorker.js"
             ],
             "styles": [
               "src/styles.scss"

最後に worker を起動するための関数を main.ts で呼び出す。

確認

worker 経由でデータが取得できていることが確認できる。

まとめ

セットアップはかなり簡単でお手軽な印象を受けた。 導入の手順を見てもわかるように別にサーバーを立ち上げる必要もない。

Angular in-memory-web-api も別サーバーを立てる必要がないという点では同じである。 しかし HTTP リクエストの処理の直前に割り込んでモックデータを返す作りになっているので、ブラウザ DevTools のネットワーク機能でそのリクエストを見ることができず不便だと感じていた。

一方で MSW では上の図のようにそのリクエストを見ることができるので開発などで便利に使えそうである。