Why We Love MSW

Back in the day, when we were trying to create a new project, we considered the possibility of not depending heavily on the backend. Our idea was to receive mocks for the backend's current work and then proceed in parallel. This approach would allow us to have the necessary data ready when the backend completed its work, so we wouldn't need to make any changes. Once the backend was deployed, we could simply disable the mocks in the development server and switch to the real endpoints.

I'm sure many tools exist that enable you to create mocks and replace them later with real endpoints. However, we found a great solution: Mock Service Worker (MSW).

What is MSW?

MSW is a powerful tool that allows you to intercept and mock network requests. It works both on the client-side and server-side, making it incredibly versatile. With MSW, you can create realistic mocks for your API endpoints, enabling you to develop and test your application without relying on the actual backend.

Benefits of Using MSW

Local Development

MSW helps to avoid making numerous calls to the backend during local development. This reduces load on the backend services and speeds up the development process. Here's an example of how you can set up MSW for local development:

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers =
  [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ];

// src/mocks/browser.js
import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker =
  setupWorker(
    ...handlers,
  );

// src/index.js
if (
  process.env
    .NODE_ENV ===
  'development'
) {
  const {
    worker,
  } = require('./mocks/browser');
  worker.start();
}

QA Testing

MSW helps QA teams test the UI without making actual calls to the backend. This is especially useful when the backend is unstable or under heavy development. QA engineers can work with predefined mock data, ensuring that the frontend works as expected.

Automated Testing

For automated testing, MSW avoids the need to intercept each call manually. With a basic configuration, you can mock responses for various scenarios, making your tests more reliable and easier to write. Here’s an example of setting up MSW in a test environment:

// src/mocks/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server =
  setupServer(
    ...handlers,
  );

// src/setupTests.js
import { server } from './mocks/server';

beforeAll(() =>
  server.listen(),
);
afterEach(() =>
  server.resetHandlers(),
);
afterAll(() =>
  server.close(),
);

How to Handle Handlers

You can organize your handlers by grouping them into separate files and combining them as needed. For example:

// src/mocks/handlers.js
import { userHandlers } from './user';
import { productHandlers } from './product';

export const handlers =
  [
    ...userHandlers,
    ...productHandlers,
  ];

Each handler can have multiple scenarios for testing purposes. Here's an example of how to define and use scenarios:

Scenarios in Handlers

A scenario is a predefined set of responses that simulate different conditions, such as success or error states. This allows you to easily switch between different mock responses.

// src/mocks/user.js
import { rest } from 'msw';

const USER_URL =
  'http://pii.dev.localhost:3200/api/v1/userV2/current';

const scenarios = {
  success: [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ],
  error: [
    http.get(
      USER_URL,
      () => {
        return HttpResponse.json(
          {
            error:
              'Unauthorized',
          },
          {
            status: 401,
          },
        );
      },
    ),
  ],
};

const scenarioName =
  new URLSearchParams(
    window.location.search,
  ).get(
    'scenario',
  ) || 'success';
export const userHandlers =
  scenarios[
    scenarioName
  ] || [];

Explanation of Scenarios

Scenarios allow you to easily test different conditions your application might encounter. By changing the scenario query parameter in the URL, you can simulate different responses without changing the code.

For example, to test the success scenario, you would navigate to:

http://yourapp.localhost/?scenario=success

And for the error scenario:

http://yourapp.localhost/?scenario=error

This approach allows you to dynamically switch between different mock responses, making your development and testing process more flexible and efficient.

By using MSW, we have a seamless way to handle mock data and API responses in both development and testing environments. It allows us to focus on developing features and writing tests without worrying about the backend's availability or stability. With MSW, we can confidently create realistic mock scenarios and ensure our application works correctly before integrating with the real backend.

I'm still discovering how MSW works. If you have any better solutions, please feel free to tell me.

If you want to check the best practices, feel free to check the documentation.