Mock Service Worker

Frequently asked questions

How is it different than library XYZ?

Please see the Comparison page for detailed technical and conceptual comparison between Mock Service Worker and other popular API mocking libraries.

In a nutshell, most solutions provide requests interception on the application level, while Mock Service Worker intercepts requests on the network level. It also allows you to use the same mock definition not only for testing, but for development and debugging as well.

Does it support library XYZ?

Yes. All request-issuing libraries are supported.

Be it axios, react-query, or plain fetch—Mock Service Worker supports all libraries that issue requests in both browser and NodeJS.

Can I use it with Node?

Yes.

Mock Service Worker provides a Node-compatible API to allow you to reuse the same mocking logic in a Node environment (for example, for testing).

Integrate with Node/docs/getting-started/integrate/node

Can I use it with React Native?

Yes, but only for NodeJS integration.

Since React Native does not execute in a browser environment, you cannot run a Service Worker alongside your application.

However, you can use Mock Service Worker in your React Native project for unit and integration tests that run in Node. Please see the following page for the integration steps:

Integrate with Node/docs/getting-started/integrate/node

Is this library secure?

Yes.

Mock Service Worker uses Service Worker API for requests interception. That API is implemented by a browser according to the Service Worker specification, making the library as secure as the worker's implementation itself.

Moreover, you are in full control over the Service Worker's code (mockServiceWorker.js), because you copy and serve it manually.

Learn more about Service Worker security from Google.

Should I commit the worker script to Git?

Yes.

We highly recommend committing the mockServiceWorker.js file to Git. That way all the collaborators would have the same mocking behavior, ensuring consistent experience across the team.

Alternatively, you can generate the Service Worker file by executing npx msw init as a part of your development pipeline.

Why should I drop query parameters from a request handler URL?

Request handler URL represents a server-side resource path, similar to how you would describe that resource on an actual server. Since query parameters do not describe the resource path, but rather provide additional data to a resource, they cannot affect request matching and must be omitted when providing a request URL.

1- rest.get('/user?id=abc', resolver)
2+ rest.get('/user', resolver)

It is still possible to access query parameters and build the mocking logic around them in the response resolver.

Why do I get stale responses when using React Query/SWR/etc?

Caching mechanism of some request clients may produce stale responses in your tests. Make sure you clear the cache before/after each test suite for your tests to remain predictable.

React Query

1import { queryCache } from 'react-query'
2
3beforeEach(() => {
4 queryCache.clear()
5})

SWR

1import { cache } from 'swr'
2
3beforeEach(() => {
4 cache.clear()
5})

Apollo Client

1import { client } from '../lib/apolloClient';
2
3beforeEach(() => {
4 return client.cache.reset()
5})

The exact API for clearing cache may differ depending on your request client. Please refer to your request client's documentation for more details.