【MSW】環境構築

はじめに

この記事は【MSW】を使ったモックAPIの備忘録である。

MSWとは

Mock Service Worker（MSW）は、サービスワーカーを利用してネットワークリクエストを捕捉し、カスタマイズされたレスポンスを返すことでAPIのモックを簡単に作成できるJavaScriptのライブラリである。
これにより、実際のバックエンドサービスが完成する前でも、フロントエンドの開発を進めることができる。

導入方法

1. インストール

以下コマンドを実行する

npm install msw@latest --save-dev

npx msw init public/ --save

2. browser 用の worker を準備

touch src/mocks/browser.js

import { setupWorker } from "msw/browser";
import { handlers } from './handlers' 
export const worker = setupWorker(...handlers)

worker の呼び出し

あとは、entry point で worker.start() を呼び出せばOK。

if (process.env.NODE_ENV === 'development') {
  worker.start()
}