Package Exports

msw-storybook-addon

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (msw-storybook-addon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

MSW Storybook addon

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 DefaultBehavior = () => <UserProfile />;

DefaultBehavior.story = {
  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.