storybook-addon-mock

What is storybook-addon-mock?

storybook-addon-mock is an addon for Storybook that allows you to mock API requests and responses. This is particularly useful for developing and testing UI components in isolation without relying on a live backend.

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

Mocking API Requests

This feature allows you to mock API requests and responses. In the code sample, the MockedProvider decorator is used to wrap the component, and mockData is provided to simulate an API response for a GET request to '/api/data'.

json
{
  "title": "Mocking API Requests",
  "code": "import { MockedProvider } from 'storybook-addon-mock';\nimport { storiesOf } from '@storybook/react';\nimport MyComponent from './MyComponent';\n\nstoriesOf('MyComponent', module)\n  .addDecorator(MockedProvider)\n  .add('default', () => <MyComponent />, {\n    mockData: [\n      {\n        url: '/api/data',\n        method: 'GET',\n        status: 200,\n        response: { data: 'mocked data' }\n      }\n    ]\n  });",
  "description": "This feature allows you to mock API requests and responses. In the code sample, the MockedProvider decorator is used to wrap the component, and mockData is provided to simulate an API response for a GET request to '/api/data'."
}

Mocking Multiple Endpoints

This feature allows you to mock multiple API endpoints. In the code sample, two endpoints are mocked: a GET request to '/api/data' and a POST request to '/api/other'.

json
{
  "title": "Mocking Multiple Endpoints",
  "code": "import { MockedProvider } from 'storybook-addon-mock';\nimport { storiesOf } from '@storybook/react';\nimport MyComponent from './MyComponent';\n\nstoriesOf('MyComponent', module)\n  .addDecorator(MockedProvider)\n  .add('default', () => <MyComponent />, {\n    mockData: [\n      {\n        url: '/api/data',\n        method: 'GET',\n        status: 200,\n        response: { data: 'mocked data' }\n      },\n      {\n        url: '/api/other',\n        method: 'POST',\n        status: 201,\n        response: { result: 'success' }\n      }\n    ]\n  });",
  "description": "This feature allows you to mock multiple API endpoints. In the code sample, two endpoints are mocked: a GET request to '/api/data' and a POST request to '/api/other'."
}

Conditional Mocking

This feature allows you to conditionally mock API responses based on the request. In the code sample, the response for the GET request to '/api/data' is determined by the query parameter 'id'.

json
{
  "title": "Conditional Mocking",
  "code": "import { MockedProvider } from 'storybook-addon-mock';\nimport { storiesOf } from '@storybook/react';\nimport MyComponent from './MyComponent';\n\nstoriesOf('MyComponent', module)\n  .addDecorator(MockedProvider)\n  .add('default', () => <MyComponent />, {\n    mockData: [\n      {\n        url: '/api/data',\n        method: 'GET',\n        status: 200,\n        response: (req) => {\n          if (req.query.id === '1') {\n            return { data: 'mocked data for id 1' };\n          }\n          return { data: 'default mocked data' };\n        }\n      }\n    ]\n  });",
  "description": "This feature allows you to conditionally mock API responses based on the request. In the code sample, the response for the GET request to '/api/data' is determined by the query parameter 'id'."
}

Other packages similar to storybook-addon-mock

msw

Mock Service Worker (msw) is a library for mocking network requests in both browser and Node.js environments. It intercepts requests on the network level, providing more flexibility and control over the mocked responses. Compared to storybook-addon-mock, msw can be used outside of Storybook and offers more advanced features for request interception and mocking.

fetch-mock

fetch-mock is a library for mocking fetch requests. It allows you to define how fetch calls should be handled, providing a way to simulate different network conditions and responses. While fetch-mock is not specifically designed for Storybook, it can be integrated into Storybook stories to achieve similar functionality to storybook-addon-mock.

axios-mock-adapter

axios-mock-adapter is a library for mocking axios requests. It allows you to define how axios requests should be handled, providing a way to simulate different network conditions and responses. Like fetch-mock, axios-mock-adapter is not specifically designed for Storybook but can be used within Storybook stories to mock API requests.

README

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.

Purpose

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. Mostly, there's no playground to modify the response and see the changes in the storybook.

Highlights

storybook-addon-mock provides the following features.

• You can mock fetch or XMLHttpRequest.
• A dedicated panel where you can see the list of mock requests.
• An on/off button for each request which can turn off the mock and try the real request.
• A dropdown list of status code where you can change the status and experience the difference.
• A response JSON object which can be modified in the panel. You can see the changes straight away in the story.
• A delay option which helps you delaying the response so that you can test any kind of loading behaviour.

Documentation

See the documentation

Older(2.*) version documentation

License

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