MSW

If you want to generate a mock, define the mock property to true and a mock of MSW will be generated in the target file. You can check MSW to configure MSW correctly in your project.

Example of orval.config.js

1 module.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 };

The mock definition consists of the following three functions.

1. A function that returns a mocked value of a schema object
2. A function that returns the value of binding the mock object to the http request handler of MSW
3. A function that returns an Array that aggregates all handlers in the file.

A function that returns a mocked value of a schema object

A function that returns a mock object will be generated as shown below:

1 import { faker } from '@faker-js/faker';
2 
3 export 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 });

The value is implemented in faker.js. If you want to overwrite part of the object, you can write the mock value by specifying it as a function argument.

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

A function that returns the value of binding the mock object to the http request handler of MSW

A function is generated that returns the value of the mock object bound to the MSW http request handler as shown below:

1 import { HttpResponse, delay, http } from 'msw';
2 
3 export 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 };

If you want to overwrite mocked http response object, you can write the object by specifying it as a function argument.

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

You can also pass a function as an argument, which will be called every time a request is made to the API.

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

For example, if you want to use the generated mock in a test to verify that the API was called, you can use it as follows:

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

A function that returns an Array that aggregates all handlers in the file.

Aggregate all functions that return handlers and generate a function that returns as an Array as below:

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

You can run the MSW server using this function.

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