Socket
Socket
Sign inDemoInstall

msw-storybook-addon

Package Overview
Dependencies
Maintainers
3
Versions
67
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

msw-storybook-addon

Mock API requests in Storybook with Mock Service Worker.


Version published
Maintainers
3
Created

What is msw-storybook-addon?

The msw-storybook-addon package is an addon for Storybook that integrates with Mock Service Worker (MSW) to mock API requests. It allows developers to create and manage mock API responses directly within Storybook, making it easier to develop and test UI components in isolation.

What are msw-storybook-addon's main functionalities?

Mocking API Requests

This feature allows you to mock API requests using MSW within Storybook. The code sample demonstrates how to initialize the addon, set up a decorator, and define a handler for a GET request to '/api/user'.

import { initialize, mswDecorator } from 'msw-storybook-addon';
import { rest } from 'msw';

initialize();

export const decorators = [
  mswDecorator,
];

export const handlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(ctx.json({ username: 'John Doe' }));
  }),
];

Configuring Handlers Per Story

This feature allows you to configure different handlers for each story. The code sample shows how to set up a handler for a specific story, overriding the default handler for the '/api/user' endpoint.

import { rest } from 'msw';

export default {
  title: 'Example/Button',
  parameters: {
    msw: [
      rest.get('/api/user', (req, res, ctx) => {
        return res(ctx.json({ username: 'Jane Doe' }));
      }),
    ],
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Button',
};

Logging and Debugging

This feature provides logging and debugging capabilities for unhandled requests. The code sample demonstrates how to initialize the addon with a configuration that logs warnings for unhandled requests.

import { initialize, mswDecorator } from 'msw-storybook-addon';

initialize({ onUnhandledRequest: 'warn' });

export const decorators = [
  mswDecorator,
];

Other packages similar to msw-storybook-addon

Keywords

FAQs

Package last updated on 12 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc