README.md

Storybook Addon Mock

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

Live Demo 🚀

Why we need this

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

Mock data properties

Property	Description	Required	Default
url	Supports both named parameters (/:foo/:bar) and query parameters.(/foo?bar=true)	Y	-
method	Supports GET, POST, PUT, PATCH and DELETE methods.	-	GET
status	All possible HTTP status codes.	-	200
response	JSON format or function. Response function is a function that contains request object as a parameter. See the Custom Response section for example.	Y	-
delay	Emulate delayed response time in milliseconds.	-	0

You can change the status, response and delay from the storybook panel on the fly! 🚀

---

How to use

Install the addon in your project as dev dependencies.

  yarn add -D storybook-addon-mock

Using Storybook 6

Add the decorator in your addons, in .storybook/main.js:

module.exports = {
    addons: ['storybook-addon-mock/register'],
};

Add decorator in the stories.

import React from 'react';
import withMock from 'storybook-addon-mock';
import Component from './Component';

export default {
    title: 'Component',
    component: Component,
    decorators: [withMock],
};

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

export const Default = Template.bind({});
Default.parameters = {
    mockData: [
        {
            url: 'https://jsonplaceholder.typicode.com/todos/1',
            method: 'GET',
            status: 200,
            response: {
                data: 'Hello storybook-addon-mock!',
            },
        },
    ],
};

Thanks to shilman for this solution

Using older versions of Storybook

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('Mock Response Story', module)
    .addDecorator(withMock)
    .add('Story Item', () => <ComponentWithAPICall />, {
        mockData: [
            {
                url: 'https://jsonplaceholder.typicode.com/todos/1',
                method: 'GET',
                status: 200,
                response: {
                    data: 'Hello storybook-addon-mock!',
                },
            },
        ],
    });

Custom Response

import React from 'react';
import withMock from 'storybook-addon-mock';
import Component from './Component';

export default {
    title: 'Component',
    component: Component,
    decorators: [withMock],
};

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

export const Default = Template.bind({});
Default.parameters = {
    mockData: [
        {
            url: 'https://jsonplaceholder.typicode.com/todos/1',
            method: 'GET',
            status: 200,
            response: (request) => {
                const {
                    url,
                    method,
                    body,
                    searchParams,
                } = request;

                if (searchParams.id == 1) {
                     return {
                        data: 'Custom data for id 1',
                    };   
                } else if (body.name === 'mock') {
                    return {
                        data: 'Custom data for name mock',
                    }
                }
                return {
                    data: 'Default data',
                }
            },
        },
    ],
};

User guide

See the documentation - User guide

License

This project is licensed under the MIT License - see the LICENSE file in the source code for details.