msw-auto-mock

A cli tool to generate random mock data from OpenAPI descriptions for msw.

Why

We already have all the type definitions from OpenAPI spec so hand-writing every response resolver is completely unnecessary.

This tool also requires @faker-js/faker >= 8 and msw >= 2.

Install:

yarn add msw-auto-mock @faker-js/faker -D

Read from your OpenAPI descriptions and output generated code:

# can be http url or a file path on your machine, support both yaml and json.
npx msw-auto-mock http://your_openapi.json -o ./mock.js

See here for generated code with GitHub API example. The msw mocking handlers was generated by following command:

npx msw-auto-mock https://raw.githubusercontent.com/github/rest-api-description/main/descriptions/ghes-3.3/ghes-3.3.json --output ./example/ghapi.js

Integrate with msw, see Mock Service Worker's doc for more detail:

# Install msw
yarn add msw --dev

# Init service worker
npx msw init public/ --save

Then import those mock definitions in you app entry:

import { startWorker } from './mock';

if (process.env.NODE_ENV === 'development') {
  startWorker();
}

Run you app then you'll see a successful activation message from Mock Service Worker in your browser's console.

-o, --output: specify output file path or output to stdout.
-m, --max-array-length <number>: specify max array length in response, default value is 20, it'll cost some time if you want to generate a huge chunk of random data.
-t, --includes <keywords>: specify keywords to match if you want to generate mock data only for certain requests, multiple keywords can be seperated with comma.
-e, --excludes <keywords>: specify keywords to exclude, multiple keywords can be seperated with comma.
--base-url: output code with specified base url or fallback to server host specified in OpenAPI.
--static: By default it will generate dynamic mocks, use this flag if you need it to be static.
--node: by default it will generate code for browser environment, use this flag if you want to use it in Node.js environment.
--react-native: by default it will generate code for browser environment, use this flag if you want to use it in React Native environment. Additionally, you will need to add polyfills to patch the global environment by installing react-native-url-polyfill.
-c, --codes <keywords>: comma separated list of status codes to generate responses for
-h, --help: show help info.