For components that make network requests (e.g. fetching data from a REST or GraphQL API), you can mock those requests using a tool like Mock Service Worker (MSW). MSW is an API mocking library, which relies on service workers to capture network requests and provides mocked data in response.
The MSW addon brings this functionality into Storybook, allowing you to mock API requests in your stories. Below is an overview of how to set up and use the addon.
Set up the MSW addon
First, if necessary, run this command to install MSW and the MSW addon:
If you're not already using MSW, generate the service worker file necessary for MSW to work:
Then ensure the staticDirs
property in your Storybook configuration will include the generated service worker file (in /public
, by default):
Finally, initialize the addon and apply it to all stories with a project-level loader:
Mocking REST requests
If your component fetches data from a REST API, you can use MSW to mock those requests in Storybook. As an example, consider this document screen component:
With the MSW addon, we can write stories that use MSW to mock the REST requests. Here's an example of two stories for the document screen component: one that fetches data successfully and another that fails.
Mocking GraphQL requests
GraphQL is another common way to fetch data in components. You can use MSW to mock GraphQL requests in Storybook. Here's an example of a document screen component that fetches data from a GraphQL API:
This example uses GraphQL with Apollo Client to make network requests. If you're using a different library (e.g. URQL or React Query), you can apply the same principles to mock network requests in Storybook.
The MSW addon allows you to write stories that use MSW to mock the GraphQL requests. Here's an example demonstrating two stories for the document screen component. The first story fetches data successfully, while the second story fails.
Configuring MSW for stories
In the examples above, note how each story is configured with parameters.msw
to define the request handlers for the mock server. Because it uses parameters in this way, it can also be configured at the component or even project level, allowing you to share the same mock server configuration across multiple stories.