How-to guides

Mock API responses

Configure generated MSW handlers and register them in tests or a browser worker.

Generate typed handlers

Add pluginTs and pluginMsw to your configuration. The default parser: 'data' creates handlers whose response data you supply.

kubb.config.ts
import { defineConfig } from 'kubb'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginMsw } from '@kubb/plugin-msw'

export default defineConfig({
  input: './petStore.yaml',
  output: { path: './src/gen' },
  plugins: [
    pluginTs(),
    pluginMsw({ output: { path: 'handlers', mode: 'directory' }, baseURL: 'http://localhost:3000', handlers: true }),
  ],
})

For Node tests, set baseURL to the URL your client calls so MSW can match absolute requests. Browser handlers can use relative paths for the current origin.

Supply test data

Call a generated handler with a response body or a callback that returns a Response.

test-server.ts
import { setupServer } from 'msw/node'
import { getPetByIdHandler } from './src/gen/handlers/getPetByIdHandler'

export const server = setupServer(
  getPetByIdHandler({ name: 'Rex', photoUrls: [] }),
)

Generate mock data

Add pluginFaker and change the MSW parser to 'faker'.

kubb.config.ts
import { pluginTs } from '@kubb/plugin-ts'
import { pluginFaker } from '@kubb/plugin-faker'
import { pluginMsw } from '@kubb/plugin-msw'

const plugins = [
  pluginTs(),
  pluginFaker(),
  pluginMsw({
    output: { path: 'handlers', mode: 'directory' },
    baseURL: 'http://localhost:3000',
    parser: 'faker',
    handlers: true,
  }),
]

Use this array as defineConfig.plugins. Calling getPetByIdHandler() without data now uses generated Faker values.

Register the handler collection

With handlers: true, Kubb exports an operation-ordered collection from handlers.ts. Register it in Node or a browser.

import { setupServer } from 'msw/node'
import { handlers } from './src/gen/handlers/handlers'

export const server = setupServer(...handlers)

Start the server or worker through your test or application setup.