Browser

Setup

Mock Service Worker operates client-side by registering a Service Worker responsible for requests interception. However, we don't have to write any of the worker's code by ourselves, but rather copy the worker file distributed by the library. Mock Service Worker provides a dedicated CLI to help us do that.

Execute the init command of the Mock Service Worker CLI:

1$ npx msw init <PUBLIC_DIR>

Replace the <PUBLIC_DIR> placeholder with the relative path to your server's public directory. For example, in a Create React App project this command would be:

1$ npx msw init public/

Where is my "public" directory?

A public directory is usually a root directory of your server (i.e. ./build, ./public, or ./dist). This directory is often committed to Git, and so should be the Mock Service Worker.

Common public directories

Below you can find a list of public directories in most used JavaScript project starters.

Configure worker

Let's create a file in our mock definition directory (src/mocks) where we would configure and start our Service Worker.

Create a src/mocks/browser.js file:

1$ touch src/mocks/browser.js

In the browser.js file we are going to create a worker instance with our request handlers defined earlier.

Import setupWorker function from the msw package and create a worker instance with previously defined request handlers

1// src/mocks/browser.js
2import { setupWorker } from 'msw'
3import { handlers } from './handlers'
4
5// This configures a Service Worker with the given request handlers.
6export const worker = setupWorker(...handlers)

Start worker

In order for our mock definition to excute during the runtime, it needs to be imported into our application's code. However, since mocking is a development-oriented technique, we will be importing our src/mocks/browser.js file conditionally, depending on the current environment.

Import the src/mocks/browser.js file conditionally following one of the examples below:

1// src/index.js
2import React from 'react'
3import ReactDOM from 'react-dom'
4import App from './App'
5
6if (process.env.NODE_ENV === 'development') {
7  const { worker } = require('./mocks/browser')
8  worker.start()
9}
10
11ReactDOM.render(<App />, document.getElementById('root'))

Verify & Inspect

After importing the mock definition, you should see a successful activation message from Mock Service Worker in your browser's console:

[MSW] Mocking enabled

Any requests that match previously defined handlers will now be intercepted and mocked.

Troubleshooting

If you have created a project using Create React App you should remove the following line

1serviceWorker.unregister()

in your src/index.js file. Create React App unregisters all Service Workers by default, which would also unregister the mock Service Worker, resulting into broken requests interception.