adr007-use-msw-to-mock-service-requests.md

id	title	description
adrs-adr007	ADR007: Use MSW to mock http requests	Architecture Decision Record (ADR) log on Use MSW to mock http requests

Context

Network request mocking can be a total pain sometimes, in all different types of tests, unit tests to e2e tests always have their own implementation of mocking these requests. There's been traction in the outer community towards using this library to mock network requests by using an express style declaration for routes. react-testing-library suggests using this library instead of mocking fetch directly whether this be in a browser or in node.

https://github.com/mswjs/msw

Decision

Moving forward, we have decided that any fetch or XMLHTTPRequest that happens, should be mocked by using msw.

Here is an example:

import { setupWorker, rest } from 'msw';

const worker = setupWorker(
  rest.get('*/user/:userId', (req, res, ctx) => {
    return res(
      ctx.json({
        firstName: 'John',
        lastName: 'Maverick',
      }),
    );
  }),
);

// Start the Mock Service Worker
worker.start();

and in a more real life scenario, taken from CatalogClient.test.ts

beforeEach(() => {
  server.use(
    rest.get(`${mockApiOrigin}${mockBasePath}/entities`, (_, res, ctx) => {
      return res(ctx.json(defaultResponse));
    }),
  );
});

it('should entities from correct endpoint', async () => {
  const entities = await client.getEntities();
  expect(entities).toEqual(defaultResponse);
});

Consequences

• A little more code to write
• Gradually will replace the codebase with msw