Mocks Service Worker

先來介紹一下msw，因為我們要模擬真實的環境不可能隨時都使用mock的方式模擬回傳的json file，因此我們使用msw這一套library，並有以下特點．

1. 攔截真正的network calls
2. 並回傳特定的資料

接下來安裝msw囉

$ npm install msw --save-dev
# or
$ yarn add msw --dev

並建立好兩個檔案server 與 handlers

// handlers.ts

import { rest } from 'msw';

export const handlers = [
  rest.get('http://localhost:5000/users', (req, res, ctx) => {
    return res(
      ctx.json([
        { name: 'stan', city: 'New Taipei City' },
        { name: 'mandy', city: 'Taipei City' },
        { name: 'pandas', city: 'Taipei City' }
      ])
    );
  })
];

先模擬一個rest api

// server.ts

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

然後在server檔案裡面建立一個build server的function

然後在src/setUpTests.ts的檔案寫下以下function，這三隻function分別在三個之前講過的生命週期執行，分別在一開始監聽以及每個測試reset跟所有測試結束之後結束監聽

import { server } from './mocks/server';

beforeAll(() => server.listen());

afterEach(() => server.resetHandlers());

afterAll(() => server.close());