mocks-to-msw

An adapter that provides mocks generated from the har-to-mocks to the MSW.

Motivation

As developers, integrating mock data efficiently into a project using MSW (Mock Service Worker) can be a crucial aspect of testing and development. The motivation behind the "mocks-to-msw" module is to streamline the process of connecting MSW with mocks generated by har-to-mocks through a straightforward adapter.

How It Works

1. Generate Mocks: Use "har-to-mocks" to generate mocks from actual server responses.
2. Set Up Mock Handler: Use the createMockHandler function provided by "mocks-to-msw" to set up a mock handler.

• Specify the loader function to load the generated mocks.
• Optionally, you can set the origin of the URL, for example: https://api.example.com.

import { createMockHandler } from "mocks-to-msw";

const { mock } = createMockHandler({
  loader: (path) => require(`.${path}.json`),
  origin: "https://api.example.com",
  debug: true,
});

1. Define Request Handlers: Use the mock handler to define which specific URIs will be replaced with the mocks.

• Note: If you set the origin, the code below will mock the URI https://api.example.com/api/test.

export const handlers = [mock.get("/api/test")];

Installation

To use the "mocks-to-msw" module, follow these installation steps:

Step 1: Install the msw package

Before using "mocks-to-msw", make sure to install the "msw" package. Refer to the official msw documentation for detailed instructions.

Step 2: Set up the Mock Handler

Install "mocks-to-msw" as dev dependencies.

npm install mocks-to-msw --save-dev

Usage example

// src/mocks/handlers.js
// 1. Import the library.
import { createMockHandler } from "mocks-to-msw";
// 2. Set up the mock handler using the createMockHandler function and specify the loader
const { mock } = createMockHandler({ loader: (path) => require(`.${path}.json`), debug: true });

// 3. Add request handlers for specific URIs to be replaced by mock responses
export const handlers = [
  // Mock a GET request
  mock.get("/api/test"),

  // Mock a POST request with a modifier function
  mock.post("/api/test", (json) => ({ ...json, data: "modified" })),
];

Project Description

"mocks-to-msw" serves as an adapter, facilitating the integration of mocks generated from the "har-to-mocks" CLI into MSW. The typical workflow involves using "har-to-mocks" to generate mocks from actual server responses (network record in the .har), and "mocks-to-msw" seamlessly incorporates these mocks into the MSW setup.

Why Use "mocks-to-msw"?

As a developer, the motivation for using "mocks-to-msw" stems from the desire for an efficient way to link MSW with mocks generated through the "har-to-mocks" CLI. The goal is to simplify the process of specifying URIs to be replaced by mocks and then editing the corresponding JSON data. This approach enhances mock management efficiency, as MSW takes care of substituting responses on the frontend, and the mocks are clearly organized in a dedicated folder generated by "har-to-mocks".