- Introduction
- Getting started
- Philosophy
- Comparison
- Limitations
- Debugging runbook
- FAQ
- Basics
- Concepts
- Network behavior
- Integrations
- API
- CLI
- Best practices
- Recipes
- Cookies
- Query parameters
- Response patching
- Polling
- Streaming
- Network errors
- File uploads
- Responding with binary
- Custom worker script location
- Global response delay
- GraphQL query batching
- Higher-order resolver
- Keeping mocks in sync
- Merging Service Workers
- Mock GraphQL schema
- Using CDN
- Using custom "homepage" property
- Using local HTTPS
Getting started
Three steps to get started with Mock Service Worker.
Developers come to MSW for various reasons: to establish proper testing boundaries, to prototype applications, debug network-related issues, or monitor production traffic. This makes it all the more challenging to write a single tutorial that would suit all those needs at the same time. In the end, it is your choice how you utilize the capabilities of the library, and we believe it should be you who decides on the right path to follow in this tutorial.
Step 1: Install
Install MSW as a dependency by running the following command in your project:
npm install msw@latest --save-dev
If you need to, you can also install MSW from a CDN.
Step 2: Write network behavior
To describe the network behavior you need, you have to understand how to intercept requests and how to mock their responses.
Intercepting requests
Learn about request interception and how to capture REST and GraphQL requests.
Mocking responses
Learn about response resolvers and the different ways to respond to a request.
Once you are comfortable with those concepts, learn more about the http
and graphql
namespaces you will be using to describe resources for REST and GraphQL APIs respectively.
Describing REST API
Learn about describing RESTful APIs.
Describing GraphQL API
Learn about describing GraphQL APIs.
MSW fully supports type-safe API mocking with TypeScript.
Step 3: Integrate anywhere
There are many frameworks, libraries, and tools out there but all of them run either in the browser or in Node.js (speaking about the JavaScript ecosystem). You will not find specific instructions on integrating MSW with those tools because there aren’t any. Instead, you will create environment-based integration points that work with any tool you used, are using now, or will use in the future.
Follow the integration guides for the environment(s) you need:
Browser
Integrate MSW in a browser environment, such as a React application or Storybook.
Node.js
Integrate MSW in Node.js, such as an Express application or a test runner.
It’s possible and encouraged to have both integration points in your project to so could get a consistent control over the network across the entire stack.
Examples
In the repository below, you can find the functional, complete, and minimalistic examples of how to use Mock Service Worker with tools like Jest, Vitest, Cypress, Playwright, Angular, Svelte, Remix, and others. Use them as a reference whenever integrating MSW with those tools.
Usage examples
Examples of Mock Service Worker usage with various frameworks and libraries.
Turn each usage example into a reproduction repository if you encounter an issue!
Need help?
Starting with a new tool can be difficult but you don’t have go through that alone. Whenever you encounter an issue, the best place to go is our Debugging runbook:
Debugging runbook
Steps to debug common issues with the library.
We are always happy to help you with any questions you might have. There are multiple ways you can reach out to us or other community members to get help:
And remember, there is always a person who’s one problem behind you. Be kind and offer help when you can.