Set up MSW

Setting up Mock Service Worker in your project involves three steps:

Installing the library;
Describing the network using request handlers;
Integrating MSW with the environments or tools you use.

There are many use cases for API mocking. In this exercise, we will focus primarily on using MSW for integration testing in Node.js (Vitest). Please refer to the Getting started guide in the library's documentation for more detailed instructions on using it for other purposes.

From this point on, follow 🐨 Kody to help you set up MSW in this workshop!

Install

🐨 First, install msw as a dependency to the project:

npm install msw --save-dev

Describe

When working with MSW, you describe the network using functions called request handlers. They decide which requests to intercept and how to handle their responses.

It's good practice to start with a single handlers.ts file that will contain all the request handlers for your application or tests. This is where you describe the "happy paths" of your network.

🐨

Click here to create the handlers.ts file.

In handlers.ts, we will add a single request handler that will print all requests that occur during the test to the console.

🐨 Paste the following contents into handlers.ts:

import { http } from 'msw'

export const handlers = [
  http.all('*', ({ request }) => {
    console.log(request.method, request.url)
  }),
]

This is an example request handler that matches all request methods (http.all()) to all paths (*). You will learn more about request handlers in the upcoming exercises.

Integrate

We've installed MSW and written request handlers, but it’s not active yet. To kick off mocking, we have to integrate MSW into your environment (browser or Node.js).

We are going to use MSW in Vitest, and it's recommended to integrate it as a part of the global test setup. So, let's create a setup file just for that!

🐨

Click here to create a vitest.setup.ts file.

Next, go to vitest.config.ts and add the setupFiles property to the configuration to use the newly created setup module:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    setupFiles: ['./vitest.setup.ts'],
  },
})

🐨 In the vitest.setup.ts module, import the setupServer() function from msw/node:

import { setupServer } from 'msw/node'

The setupServer() function enables MSW in any Node.js environment, such as Vitest! Despite the name, there are no actual servers involved—the mocking happens in the same process as the setupServer() call.

import { setupServer } from 'msw/node'
import { handlers } from './handlers.js'

const server = setupServer(...handlers)

Since MSW is still a form of mocking, let’s ensure it starts and finishes as part of the test run.

🐨 Add the beforeAll() and afterAll() hooks and call server.listen() and server.close() in them, respectively:

import { setupServer } from 'msw/node'
import { handlers } from './handlers.js'

const server = setupServer(...handlers)

beforeAll(() => {
  server.listen()
})

afterAll(() => {
  server.close()
})

The server.listen() and server.close() functions start and stop the interception of requests in this process.

🐨 To complete the setup, add the afterEach() hook and call the server.resetHandlers() function in there. This will reset any per-test mocks we introduce later in tests.

import { setupServer } from 'msw/node'
import { handlers } from './handlers.js'

const server = setupServer(...handlers)

beforeAll(() => {
  server.listen()
})

afterEach(() => {
  server.resetHandlers()
})

afterAll(() => {
  server.close()
})

The server.resetHandlers() function removes any request handler overrides that were added during tests.

05. Network/01. Set up MSW (💪 problem)

Set up MSW

Install

Describe

Integrate