MSW

To generate mocks, define the mock property to true and a mock of MSW will be generated in the target file. Visit the MSW documentation to configure MSW correctly in your project.

Example of 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};

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:

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});

The value is implemented in faker.js. To overwrite part of the object, modify the mock property by specifying it as a function argument.

1import { getShowPetByIdMock } from 'pets.msw';
2
3const pet = getShowPetByIdResponseMock({ name: 'override' });
4console.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:

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};

To overwrite the mocked HTTP response object, provide the object by specifying it as a function argument.

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: {} }

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

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

For example, to use the generated mock in a test to verify that the API was called, do as follows:

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);

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:

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

Run the MSW server using this function.

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

You can also turn on indexMockFiles which will allow you dynamically import all mock handlers.

1// node.ts
2import * as mocks from './endpoints/index.msw';
3import { setupServer } from 'msw/node';
4
5const handlers = Object.entries(mocks).flatMap(([, getMock]) => getMock());
6const server = setupServer(...handlers);
7
8export { server };