在 JavaScript 專案使用 Mock Service Worker 模擬 API 回應

Others
, , ,

建立專案

建立專案。

1
2
npm create vite@latest msw-example -- --template vanilla
cd msw-example

安裝依賴套件。

1
npm install

安裝 msw 套件。

1
npm install msw --save-dev

模擬端點

修改 main.js 檔，呼叫一個不存在的 API 端點。

1
2
3
4
5
const res = await fetch('/posts')
  .then((r) => r.json())
  .then((r) => r);

console.log(res); // Uncaught SyntaxError

新增 mocks/handlers.js 檔，模擬要呼叫的 API 端點。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { rest } from 'msw';

export const handlers = [
  rest.get('/posts', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([
        {
          foo: 'bar',
        },
      ]),
    );
  }),
];

初始化 Worker 並透過 Mock Service Worker CLI 創建 mockServiceWorker.js 檔到 public 資料夾。

1
npx msw init public/ --save

新增 mocks/browser.js 檔。

1
2
3
4
import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

修改 main.js 檔，在開發環境下引入 Worker 並啟動。

1
2
3
4
5
6
7
8
9
10
if (process.env.NODE_ENV === 'development') {
  const { worker } = await import('./mocks/browser');
  worker.start();
}

const res = await fetch('/posts')
  .then((r) => r.json())
  .then((r) => r);

console.log(res);

啟動服務。

1
npm run dev

參考資料