Mock Service Worker

Learn to mock API requests with MSW.

Mock Service Worker

MSW intercepts network requests in the test environment and returns fake responses. You set up a server with setupServer and register a route with http.get.

A handler returns a response via HttpResponse.json(...). In the test file you call beforeAll(() => server.listen()) and afterAll(() => server.close()).

This way a component tests real fetch behaviour without a live API.

Handlers and responses

An MSW handler looks like http.get('/api/user', resolver). The resolver receives request info and returns an HttpResponse.

To set a status code use HttpResponse.json(data, { status: 201 }). To test an error scenario return HttpResponse.error().

All handlers are passed to setupServer in an array.

Exercise Write the MSW server

Write the MSW server. Call setupServer with http.get('/api/user', () => HttpResponse.json({ name: 'Alex' })). Export the server.

Show example solution

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = setupServer(
  http.get('/api/user', () => HttpResponse.json({ name: 'Alex' }))
);
export default server;

Test yourself

Fill in the blank: set up the MSW server

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = ____(
  http.get('/api/user', () => HttpResponse.json({ name: 'Alex' }))
);

Show answer

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = setupServer(
  http.get('/api/user', () => HttpResponse.json({ name: 'Alex' }))
);

How is an error scenario tested in MSW?
- By shutting the real server
- By returning HttpResponse.error()
- By setting fetch to null
- By wrapping with try/catch
Show answer

By returning HttpResponse.error() — HttpResponse.error() gives an error response.
Match MSW concepts

setupServer

Creates the server
http.get

Catches a route
HttpResponse.json

Gives a fake response
server.listen

Starts listening

Next lesson: Coverage measurement

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies