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に変更します。
browser.ts
worker.start({
onUnhandledRequest: 'bypass',
})
所感
mswはService Workerでモックしているので、アプリケーションとして本番環境とほとんど変わらずに動作確認できるのが大きなメリットですね。あと、json-serverを使うときのように、別プロセスを起動する必要もないので、管理しやすそうです。