docs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdx
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.
<Callout variant="warning" icon="⚠️">The instructions and snippets here are for v3 of the MSW addon. If you're using v2, please refer to an older version of this page for guidance.
After updating msw-storybook-addon to v3, you can migrate your configuration and stories from v2 to v3 automatically using the codemod:
npx msw-storybook-migrate
For more information, see the MSW migration guide.
</Callout>First, if necessary, run this command to install MSW and the MSW addon:
<CodeSnippets path="msw-addon-install.md" />If you're not already using MSW, generate the service worker file necessary for MSW to work:
<CodeSnippets path="msw-generate-service-worker.md" /> <If renderer="angular"> <Callout variant="info" icon="💡">Angular projects will likely need to adjust the command to save the mock service worker file in a different directory (e.g., src).
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 register it for all stories with a project-level loader (if using CSF 3) or by adding the addon to preview.ts (if using CSF Next):
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:
<CodeSnippets path="document-screen-fetch.md" /> <Callout variant="info">This example uses the fetch API to make network requests. If you're using a different library (e.g. axios), you can apply the same principles to mock network requests in Storybook.
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.
<CodeSnippets path="msw-addon-configure-handlers-http.md" />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:
<CodeSnippets path="document-screen-with-graphql.md" /> <If renderer="svelte"> <Callout variant="info">This example uses URQL to make network requests. If you're using a different library (e.g., Houdini or Graffle), you can apply the same principles to mock network requests in Storybook.
</Callout> </If> <If notRenderer="svelte"> <Callout variant="info">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.
</Callout> </If>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.
<CodeSnippets path="msw-addon-configure-handlers-graphql.md" />In the examples above, note how each story is configured using beforeEach on the stories to define the request handlers for the mock server. You can also use beforeEach at the component (meta) level to apply handlers to all stories in that file or at the project level (in preview.ts) to apply them to all stories in the project.
If using CSF 3, you can also use the msw parameter to define handlers for a story, component, or project. See the older version of this page for examples of using the msw parameter.