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 getShowPetByIdMock = (overrideResponse?: any) => ({
4   id: faker.number.int({ min: undefined, max: undefined }),
5   name: faker.word.sample(),
6   tag: faker.helpers.arrayElement([faker.word.sample(), undefined]),
7   ...overrideResponse,
8 });

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 = getShowPetByIdMock({ name: 'orverride' });
4 console.log(pet);
5 // => { id: 7272122785202176, ​name: "orverride", 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 = (overrideResponse?: Pet) => {
4   return http.get('*/pets/:petId', async () => {
5     await delay(1000);
6     return new HttpResponse(
7       JSON.stringify(
8         overrideResponse ? overrideResponse : getShowPetByIdMock(),
9       ),
10       {
11         status: 200,
12         headers: {
13           'Content-Type': 'application/json',
14         },
15       },
16     );
17   });
18 };

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

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