browser.mdx

order	title	description	keywords
1	Browser integration	Set up Mock Service Worker in the browser.	integrate integration setup browser client worker

In the browser, MSW works by registering a Service Worker responsible for request interception on the network level.

import { Info } from '../../../components/react/info'

Although Service Workers are meant to be served via HTTPS, browsers allow registering workers on HTTP while developing on `localhost`. If you need a local HTTPS development, see [this recipe](/docs/recipes/using-local-https).

Copy the worker script

If your application registers a Service Worker it must host and serve it. The library CLI provides you with the init command to quickly copy the ./mockServiceWorker.js worker script into your application's public directory.

npx msw init <PUBLIC_DIR>

Learn more about the init CLI command.

Once copied, navigate to the /mockServiceWorker.js URL of your application in your browser (e.g. if your application is running on http://localhost:3000, go to the http://localhost:3000/mockServiceWorker.js route). You should see the worker script contents. If you see a 404 or a MIME type error, make sure you are specifying the correct PUBLIC_DIR when running the init command, and that you adjust any potential configuration of your application that would affect serving static files.

Setup

// src/mocks/browser.js
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

Learn about the setupWorker API.

Conditionally enable mocking

Lastly, we need to start the worker by calling worker.start(), which will register and activate the Service Worker. We also only want to enable API mocking in development so our production traffic is unaffected.

Because regsitering the Service Worker is an asynchronous operation, it's a good idea to defer the rendering of your application until the registration Promise resolves.

// src/index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './App'

async function deferRender() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }

  const { worker } = await import('./mocks/browser')

  // `worker.start()` returns a Promise that resolves
  // once the Service Worker is up and ready to intercept requests.
  return worker.start()
}

deferRender().then(() => {
  ReactDOM.render(<App />, rootElement)
})

import { Warning } from '../../../components/react/warning'

Make sure to await the `worker.start()` Promise! Service Worker registration is asynchronous and failing to await it may result in a race condition between the worker registration and the initial requests your application makes.

Confirmation

Go to your application in the browser and open the Console in the Developer Tools. If the integration was successful, you will see the following message being printed:

[MSW] Mocking enabled.

If you don't see this message or see an error instead, please follow this page from the beginning and make sure you've completed all the steps.

Related materials

import { PageCard } from '../../../components/react/pageCard' import { NodejsIcon } from '../../../components/react/icons/nodejs' import { GraphQLIcon } from '../../../components/react/icons/graphql'