MSWの基本
Mock Service Worker（MSW）は、サービスワーカーを利用してネットワークリクエストを捕捉し、カスタマイズされたレスポンスを返すことでAPIのモックを簡単に作成できるJavaScriptのライブラリです。これにより、実際のバックエンドサービスが完成する前でも、フロントエンドの開発を進めることができます。
サービスワーカーとは
サービスワーカーは、Webページとは独立してバックグラウンドで動作するスクリプトで、Webブラウザが提供する技術の一つです。サービスワーカーは、プロキシサーバーのように動作し、ネットワークリクエストをインターセプトして処理することができます。これにより、オフラインでのページアクセスの向上、バックグラウンドデータ同期、プッシュ通知の送信、ネットワークリクエストのキャッシュ管理など、多岐にわたる機能を実現することが可能です。
MSWの設定方法
まず、npmやyarnを使ってMSWをプロジェクトにインストールします。
$ npm install msw --save-dev
$ npx msw init public --save
APIのモッキング
モックを設定する際は、handlers配列にAPIエンドポイントごとに定義します。これにより、異なるAPIリクエストに対して具体的なレスポンスを模擬できます。
src/mocks/handlers.ts
import { rest } from 'msw'
export const handlers = [
rest.get('/users', (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json([{ id: 1, name: 'John Doe' }])
)
}),
// 他のAPIエンドポイントに対するモックをここに追加
]
ハンドラーを呼び出す処理
src/mocks/browser.ts
import { setupWorker } from 'msw'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)
workerを起動させる処理
src/index.tsx
if (process.env.NODE_ENV === "development") {
const { worker } = require("./mocks/browser");
worker.start();
}
使用シーン
- フロントエンドの動き＆デザインを確認すること
- jestでAPIを呼ぶ部分のテスト
- seleniumなどでBEを使わずブラウザを通したテスト
便利だと感じること
- バックエンドの開発を待たずにフロントエンドの開発ができること
- バックエンドとフロントエンドでリポジトリを完全に分けても開発が可能
- handlerを少しいじるだけでレスポンスのステータス&中身を変えることができるため異常系の確認が楽
- レスポンスが返ってくるまでの時間を調整できる
使ってみて反省点
- 突き詰めすぎるとBEの再開発になってしまう
- リクエストに応じてresponseを変えることができるが完璧にしようとしてmock実装に時間をかけてしまった
解決できていない課題
- 更新&refetchするパターンの実装の時に値を変えるにはどうすればよいか