Storybook Integration

npm install -D msw msw-storybook-addon

import { initialize, mswLoader } from 'msw-storybook-addon'
 
initialize()
 
const preview = {
  loaders: [mswLoader]
}
 
export default preview

import type { Meta, StoryObj } from '@storybook/react'
import { http, HttpResponse } from 'msw'
import { UserProfile } from './UserProfile'
import { readScenario } from '@mockmaster/cli'
import { createReplayHandler } from '@mockmaster/msw-adapter'
 
const meta: Meta<typeof UserProfile> = {
  title: 'Components/UserProfile',
  component: UserProfile
}
 
export default meta
type Story = StoryObj<typeof UserProfile>
 
export const Default: Story = {
  parameters: {
    msw: {
      handlers: [
        http.get('https://api.example.com/users/:id', async ({ params }) => {
          const scenario = await readScenario('./scenarios', 'user-profile')
          const handler = createReplayHandler(scenario)
 
          const response = handler({
            method: 'GET',
            path: `/users/${params.id}`
          })
 
          return HttpResponse.json(response.body, { status: response.status })
        })
      ]
    }
  }
}