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 byhar-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.

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

const { mock } = createMockHandler({
  loader: (path) => require(`.${path}.json`),
  debug: true,
});

3. Define Request Handlers: Use the mockHandler to define request handlers, replacing specific URIs with the desired mocks.

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 dependances.

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, 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.