ADR007使用 MSW 模拟 http 请求

上下文

在所有不同类型的测试(从单元测试到 e2e 测试)中，网络请求模拟有时会非常痛苦，因为它们总是有自己的模拟这些请求的实现。 React 测试库建议使用该库，而不是直接模拟获取，无论是在浏览器中还是在节点中。

https://github.com/mswjs/msw

决定

今后，我们决定任何fetch或XMLHTTPRequest应使用msw.

下面就是一个例子：

import { setupWorker, rest } from 'msw';

const worker = setupWorker(
  rest.get('*/user/:userId', (req, res, ctx) => {
    return res(
      ctx.json({
        firstName: 'John',
        lastName: 'Maverick',
      }),
    );
  }),
);

// Start the Mock Service Worker
worker.start();

在更真实的生活场景中，摘自CatalogClient.test.ts

beforeEach(() => {
  server.use(
    rest.get(`${mockApiOrigin}${mockBasePath}/entities`, (_, res, ctx) => {
      return res(ctx.json(defaultResponse));
    }),
  );
});

it('should entities from correct endpoint', async () => {
  const entities = await client.getEntities();
  expect(entities).toEqual(defaultResponse);
});

后果

• 需要编写更多代码 * 逐步用 msw 替换代码库