MSW

如果您想生成模拟，请将 mock 属性定义为 true，将在目标文件中生成 MSW 的模拟。您可以查看 MSW 以在项目中正确配置 MSW。

orval.config.js 示例

1module.exports = {
2  'petstore-file-transfomer': {
3    output: {
4      mode: 'single',
5      target: './src/petstore.ts',
6      schemas: './src/model',
7      mock: true,
8    },
9    input: {
10      target: './petstore.yaml',
11    },
12  },
13};

模拟定义由以下三个函数组成。

1. 返回模式对象模拟值的函数
2. 返回将模拟对象绑定到 MSW HTTP 请求处理器的值的函数
3. 返回聚合文件中所有处理器的 Array 的函数

返回模式对象模拟值的函数

返回模拟对象的函数将按如下方式生成：

1import { faker } from '@faker-js/faker';
2
3export const getShowPetByIdResponseMock = (
4  overrideResponse: Partial<Pet> = {},
5): Pet => ({
6  id: faker.number.int({ min: undefined, max: undefined }),
7  name: faker.string.alpha(20),
8  tag: faker.string.alpha(20),
9  ...overrideResponse,
10});

该值在 faker.js 中实现。 如果您想覆盖对象的一部分，可以通过将其指定为函数参数来编写模拟值。

1import { getShowPetByIdMock } from 'pets.msw';
2
3const pet = getShowPetByIdResponseMock({ name: 'override' });
4console.log(pet);
5// => { id: 7272122785202176, ​name: "override", tag: undefined }

返回将模拟对象绑定到 MSW HTTP 请求处理器的值的函数

生成一个函数，返回绑定到 MSW HTTP 请求处理器的模拟对象的值，如下所示：

1import { HttpResponse, delay, http } from 'msw';
2
3export const getShowPetByIdMockHandler = (
4  overrideResponse?:
5    | Pet
6    | ((
7        info: Parameters<Parameters<typeof http.get>[1]>[0],
8      ) => Promise<Pet> | Pet),
9) => {
10  return http.get('*/pets/:petId', async (info) => {
11    await delay(1000);
12    return new HttpResponse(
13      JSON.stringify(
14        overrideResponse !== undefined
15          ? typeof overrideResponse === 'function'
16            ? await overrideResponse(info)
17            : overrideResponse
18          : getShowPetByIdResponseMock(),
19      ),
20      {
21        status: 200,
22        headers: {
23          'Content-Type': 'application/json',
24        },
25      },
26    );
27  });
28};

如果您想覆盖模拟的 HTTP 响应对象，可以通过将其指定为函数参数来编写对象。

1import { Pet } from './gen/model/pet';
2import { getShowPetByIdMockHandler } from 'petstore.msw';
3
4const pet: Pet = { id: 1, name: 'test', tag: 'test' };
5
6const showPetByIdMockHandler = getShowPetByIdMockHandler(pet);
7console.log(showPetByIdMockHandler);
8// => Object { info: {…}, isUsed: false, resolver: async getShowPetByIdMockHandler(), resolverGenerator: undefined, resolverGeneratorResult: undefined, options: {} }

您也可以传递一个函数作为参数，每次向 API 发出请求时都会调用该函数。

1getShowPetByIdMockHandler((info) => {
2  const body = await info.request.json();
3
4  return { message: `body: ${body}` };
5});

例如，如果您想在测试中使用生成的模拟来验证 API 是否被调用，可以按如下方式使用：

1import { expect, vi } from 'vitest';
2import { getShowPetByIdMock, getShowPetByIdMockHandler } from 'pets.msw';
3
4const mockFn = vi.fn();
5
6const mock = [
7  getShowPetByIdMockHandler((info) => {
8    const body = await info.request.json();
9
10    mockFn(body);
11    return getShowPetByIdResponseMock();
12  }),
13];
14
15expect(mockFn).toHaveBeenCalledTimes(1);

返回聚合文件中所有处理器的 Array 的函数

聚合所有返回处理器的函数，并生成一个返回 Array 的函数，如下所示：

1export const getPetsMock = () => [
2  getListPetsMockHandler(),
3  getCreatePetsMockHandler(),
4  getShowPetByIdMockHandler(),
5];

您可以使用此函数运行 MSW 服务器。

1import { getPetsMock } from 'petstore.msw';
2import { setupServer } from 'msw/node';
3
4const server = setupServer();
5server.use(...getPetsMock());