Set up MSW

Setting up Mock Service Worker in your project consists of three steps:

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

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 a 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 a handlers.ts file.

In handlers.ts, we will add a single request handler that will print any requests happening 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 illustrational request handler that matches all request methods (http.all()) to all paths (*). You will learn more about request handlers in the upcoming exercises.

Integrate

MSW is installed and request handlers are written but it doesn't do anything yet. To kick off mocking, you have to integrate MSW into your environment (browser or Node.js).

We are going to use MSW in Vitest, and it's a good practice 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 create 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, like Vitest! Despite the name, there are no actual servers involved, and 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)

Because using MSW is still mocking something, let's make sure that it starts and finishes as a 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, respectively.

🐨 To complete the setup, add the afterEach() hook and call the server.resetHandlers() function in there. This will reset any per-test mocks we will 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 handlers override that were added during the test.

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

Set up MSW

Install

Describe

Integrate