Set Up MSW in the Browser
As the name implies, Mock Service Worker (MSW) uses the Service Worker API to intercept requests in the browser. By doing that, it can achieve API mocking without patching "fetch" or affecting the source code of your app in any way—all by using the platform. Learn how to copy the worker script and register the service worker to have API mocking enabled in for client-side development.
Lecturer: [0:04] In the browser, MSW works by registering a service worker that allows it to intercept and modify outgoing network traffic. Let's create a browser module, where we will describe the browser integration.
[0:19] In the browser module, import setupWorker from msw/browser. Create a new worker variable and assign it the result of the setupWorker function call. The setupWorker function will return an object that we can use to start, stop, and control MSW execution in the browser.
[0:36] Let's export the worker object so we can reuse it anytime we need API mocking in a browser process, which can be during development or testing with tools like Playwright or Cypress. To the setupWorker call, we need to provide request handlers, functions that describe how to handle outgoing requests.
[0:51] Let's import the handlers list from the handlers module we've created before, and spread this list in the argument to the setupWorker function.
[0:57] Any service worker registration consists of two parts. It's the JavaScript API that registers the worker and the worker script itself. Our API is ready. To get the worker script, open the terminal and type npx msw. This references the MSW executable installed with the MSW package.
[1:16] On this CLI, type the init command. This command will copy the library's worker script into any directory we specify. For JavaScript to register a service worker, it has to be served from our application. It means that the directory for the worker script must be the public directory of our app.
[1:40] In Remix, that's a root-level directory called public. If unsure, check your framework's documentation to see where its public directory is located. Once the init command has finished, we can see the confirmation message about the worker script. If we go to the public directory of our project, we can see the mockServiceWorker.js file being copied there.
[1:57] Our browser integration is complete, but it won't enable API mocking just yet. To do that, let's go to the client entry of our application, which in Remix is the app/entry.client module. Here, declare a new asynchronous function called enableAPIMocking and import the worker object from the browser module we've just created.
[2:25] To register the service worker, call worker.start method. Bear in mind that registering the worker is an asynchronous action, which is indicated by the worker start method returning a promise. Make sure to await that promise before continuing.
[2:43] We also don't want any API mocking in production, so we will check the current process node environment and do an early return if this function runs anywhere except the development environment.
[2:54] Finally, call the enableAPIMocking function and move the code that renders our application in the callback when this promise resolves. This way, we defer application rendering until MSW is ready to handle requests, which eliminates race conditions between the worker registration and any requests our app makes on initial load.
[3:15] If we go to the browser's console, we can see a message saying that MSW has been successfully enabled. If we go to the applications tab in the dev tools, we can find the service worker we registered to be active and running.