Package Exports

storybook-addon-mock

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 (storybook-addon-mock) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook Addon Mock

This addon allows you to mock fetch or xmlhttprequest requests in storybook. If your component depends on backend apis, and your backend apis are not ready yet to feed your component, then this addon provides mock apis to build your component.

Screenshot

Why we need this

There are few packages those help the developers to mock the backend apis while building components. But those packages aren't integrated properly in storybook and also there's no scope to play with those apis in the storybook. storybook-addon-mock provides a dedicated panel in the storybook which helps the developer to view and update the apis with multiple scenarios.

How to use

Install the addon in your project as dev dependencies.

  yarn add -D storybook-addon-mock

Add the register in your .storybook/addons.js file

import 'storybook-addon-mock/register';

Add withMock as a decorator in the stories.

import React from 'react';
import withMock from 'storybook-addon-mock';

storiesOf('Storybook Addon Mock', module)
  .addDecorator(withMock)
  .add('Getting Mock API Response', () => <ComponentWithAPICall />, {
    mockData: [{
      url: 'https://jsonplaceholder.typicode.com/todos/1',
      method: 'GET',
      status: 200,
      response: {
        data: 'This is a Mock Response!',
      },
    }],
  });