TL;DR

mswを使ったら、すごく簡単にAPIモックができました。

バージョン

% msw --version                                                                                                                                                               
0.39.2

Angularのバージョンは11.2.8で確認しています。

インストール

% yarn add -D msw

セットアップ

初期化コマンドを実行して、src配下にmockServiceWorker.jsを生成します。

% npx msw init src

次に、angular.jsonを修正します。

angular.json

{
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets",
        "src/mockServiceWorker.js" // 追加
      ],
    }
  }
}

あとは、モックする処理をbrowser.tsに書いて

browser.ts

import { setupWorker, rest } from 'msw'

export const mocks = [
  rest.get('https://hoge.com/users/:user', (req, res, ctx) => {
    const { user } = req.params

    return res(
      ctx.status(200),
      ctx.json({
        name: `mocked-${user}`,
      }),
    )
  }),
]

const worker = setupWorker(...mocks)
worker.start()

export { worker, rest }

開発環境でのみモックさせるように、environment.tsでimportします。

environment.ts

import '../mocks/browser'

export const environment = {
  production: false,
}

動作確認

Angularを起動し、コンソールログに[MSW] Mocking enabled (fallback mode).と表示されていたら、workerが正常に起動しています。

あとは、APIがモックできていることを確認しましょう。

トラブルシュート

`Warning: captured a request without a matching request handler:`

デフォルトの設定だと、モックされていないAPIリクエストに対して、コンソールに警告が表示されます。
消したいときはonUnhandledRequestの設定値をbypassに変更します。