Mock Service Worker

Node

One of the most common usages of Mock Service Worker in Node is utilizing our request handlers for integration tests. We are going to use Jest as a test runner. Following the same principle, you can integrate mocking into any Node process.

Configure server

Let's create a file in our mock definition directory (src/mocks) where we would configure our request mocking server.

Create a src/mocks/server.js file:

1$ touch src/mocks/server.js

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

Import setupServer function from the msw package and create a server instance with previously defined request handlers

1// src/mocks/server.js
2import { setupServer } from 'msw/node'
3import { handlers } from './handlers'
4
5// This configures a request mocking server with the given request handlers.
6export const server = setupServer(...handlers)

Setup

It's recommended to configure API mocking as a part of your tests setup, so that your tests don't have to reference any mocking during their runs, focusing on testing what matters.

Using Create React App

In Create React App there is a src/setupTests.js module that is used in the Jest configuration as the setupFilesAfterEnv value.

Modify the src/setupTests.js tests setup file:

1// src/setupTests.js
2import { server } from './mocks/server.js'
3// Establish API mocking before all tests.
4beforeAll(() => server.listen())
5
6// Reset any request handlers that we may add during the tests,
7// so they don't affect other tests.
8afterEach(() => server.resetHandlers())
9
10// Clean up after the tests are finished.
11afterAll(() => server.close())
You can use the same code as above in a single test suite, if you don't wish to establish API mocking on the global level.

Using manual setup

If you are not using Create React App, please create a custom setup module and reference it using Jest's setupFilesAfterEnv option in your jest.config.js.

Create a jest.setup.js test setup file:

1$ touch jest.setup.js

Open the jest.setup.js file and write there the same code as in the Create React App src/setupTests.js example above.

Reference the setup file in jest.config.js:

1// jest.config.js
2module.exports = {
3 setupFilesAfterEnv: ['jest.setup.js'],
4}

Create jest.config.js, if you don't have it already.

Run tests

Since API mocking has been established in the tests setup, each test suite doesn't need any extra adjustments to intercept and mock API requests according to your handlers.

1// test/Login.test.js
2
3test('allows user to log in', async () => {
4 // Render components, perform requests, receive mocked responses.
5})

Direct usage

You can use the setupServer API of Mock Service Worker in any NodeJS application (for example, when developing or testing an Express server).

Bear in mind that without a DOM-like environment, like the jsdom from Jest, you must use absolute request URLs in NodeJS. This should be reflected in your request handlers:

1const server = setupServer(
2 // NOT "/user", nothing to be relative to!
3 rest.get('https://api.backend.dev/user', (req, res, ctx) => {
4 return res(ctx.json({ firstName: 'John' }))
5 }),
6)