MSW Storybook Addon

Features

• Mock Rest and GraphQL requests right inside your story.
• Document how a component behaves in various scenarios.
• Get a11y, snapshot and visual tests using other addons for free.

Full Documentation

Quick Start

Install msw & storybook addon.

npm i -D msw msw-storybook-addon

Enable msw on storybook by adding these lines in ./storybook/preview.js

import { addDecorator } from '@storybook/react'
import { initializeWorker, mswDecorator } from 'msw-storybook-addon'

initializeWorker()
addDecorator(mswDecorator)

Generate service worker for msw in your public folder.

npx msw init public/

Refer MSW official guide for framework specific paths.

Start storybook with that public folder.

npx start-storybook -s public -p 6006

Mock API calls in a story.

import { rest } from 'msw'

export const SuccessBehavior = () => <UserProfile />

SuccessBehavior.parameters = {
  msw: [
    rest.get('/user', (req, res, ctx) => {
      return res(
        ctx.json({
          firstName: 'Neil',
          lastName: 'Maverick',
        })
      )
    }),
  ],
}

The msw parameter takes an array of handlers as shown in MSW official guide.