@kubb/plugin-msw

With the MSW plugin you can use MSW to create API mocks based on a Swagger file.

Installation

bun

bun add @kubb/plugin-msw

pnpm

pnpm add @kubb/plugin-msw

npm

npm install @kubb/plugin-msw

yarn

yarn add @kubb/plugin-msw

Options

output

output.path

Relative path to save the MSW mocks. When output is a file it will save all models inside that file else it will create a file per schema item.

INFO

Type: string
Default: 'mocks'

import { pluginMsw } from '@kubb/plugin-msw'

const plugin = pluginMsw({
  output: {
    path: './mocks',
  },
})

output.exportAs

Name to be used for the export * as from './'

INFO

Type: string

import { pluginMsw } from '@kubb/plugin-msw'

const plugin = pluginMsw({
  output: {
    path: './mocks',
    exportAs: 'mocks',
  },
})

output.extName

Add an extension to the generated imports and exports, default it will not use an extension

INFO

Type: string

import { pluginMsw } from '@kubb/plugin-msw'

const plugin = pluginMsw({
  output: {
    path: './mocks',
    extName: '.js',
  },
})

output.exportType

Define what needs to exported, here you can also disable the export of barrel files

INFO

Type: 'barrel' | 'barrelNamed' | false

import { pluginMsw } from '@kubb/plugin-msw'

const plugin = pluginMsw({
  output: {
    path: './mocks',
    exportType: 'barrel',
  },
})

group

Group the MSW mocks based on the provided name.

group.type

Tag will group based on the operation tag inside the Swagger file.

Type: 'tag'
Required: true

group.output

TIP

When defining a custom output path, you should also update output.path to contain the same root path.

Relative path to save the grouped MSW mocks. {{tag}} will be replaced by the current tagName.

Type: string
Example: mocks/{{tag}}Controller => mocks/PetController
Default: '${output}/{{tag}}Controller'

group.exportAs

Name to be used for the export * as from './

Type: string
Default: '{{tag}}Handlers'

INFO

import { pluginMsw } from '@kubb/plugin-msw'

const plugin = pluginMsw({
  output: {
    path: './mocks'
  },
  group: { type: 'tag', output: './mocks/{{tag}}Handlers' },
})

include

Array containing include parameters to include tags/operations/methods/paths.

TYPE

export type Include = {
  type: 'tag' | 'operationId' | 'path' | 'method'
  pattern: string | RegExp
}

INFO

Type: Array<Include>

import { pluginMsw } from '@kubb/plugin-msw'

const plugin = pluginMsw({
  include: [
    {
      type: 'tag',
      pattern: 'store',
    },
  ],
})

exclude

Array containing exclude parameters to exclude/skip tags/operations/methods/paths.

TYPE

export type Exclude = {
  type: 'tag' | 'operationId' | 'path' | 'method'
  pattern: string | RegExp
}

INFO

Type: Array<Exclude>

import { pluginMsw } from '@kubb/plugin-msw'

const plugin = pluginMsw({
  exclude: [
    {
      type: 'tag',
      pattern: 'store',
    },
  ],
})

override

Array containing override parameters to override options based on tags/operations/methods/paths.

TYPE

export type Override = {
  type: 'tag' | 'operationId' | 'path' | 'method'
  pattern: string | RegExp
  options: PluginOptions
}

INFO

Type: Array<Override>

import { pluginMsw } from '@kubb/plugin-msw'

const plugin = pluginMsw({
  override: [
    {
      type: 'tag',
      pattern: 'pet',
      options: {

      },
    },
  ],
})

transformers

transformers.name

Override the name of the MSW data that is getting generated, this will also override the name of the file.

INFO

Type: (name: string) => string

import { pluginMsw } from '@kubb/plugin-msw'

const plugin = pluginMsw({
  transformers: {
    name: (name) => {
      return `${name}Client`
    },
  },
})

templates

Make it possible to override one of the templates.

TIP

See templates for more information about creating templates.
Set false to disable a template.

TYPE

import type { Handlers, Mock } from '@kubb/plugin-msw/components'

export type Templates = {
  handlers?: typeof Handlers.templates | false
  mock?: typeof Mock.templates | false
}

INFO

Type: Templates

import { pluginMsw } from '@kubb/plugin-msw'
import { Parser, File, Function } from '@kubb/react'
import { Mock } from '@kubb/plugin-msw/components'
import React from 'react'

export const templates = {
  ...Mock.templates,
} as const

const plugin = pluginMsw({
  templates: {
    mock: templates,
  },
})

Example

import { defineConfig } from '@kubb/core'
import { pluginOas } from '@kubb/plugin-oas'
import { pluginFaker} from '@kubb/plugin-faker'
import { pluginTs } from '@kubb/plugin-ts'

export default defineConfig({
  input: {
    path: './petStore.yaml',
  },
  output: {
    path: './src/gen',
  },
  plugins: [
    pluginOas(),
    pluginTs(),
    pluginFaker({
      output: {
        path: './mocks',
      },
      group: {
        type: 'tag',
        output: './mocks/{{tag}}Mocks',
      },
      dateType: 'date',
      unknownType: 'unknown',
      seed: [100],
    }),
  ],
})

Links

• MSW