Nuclear Pumpkin Mocha

    @nathancahill/storybook-addon-mock

    0.1.0 • Public • Published

    Storybook Addon Mock

    Follow @nutboltu

    NPM

    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

    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: 'This is a Mock Response!',
          },
       }],
    }

    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('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!',
          },
        }],
      });

    License

    MIT Licensed. Copyright (c) Farhad Yasir.

    Install

    npm i @nathancahill/storybook-addon-mock

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    19.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • nathancahill