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.

Features

• Type-safe mock handlers that ensure URLs are used with their correct HTTP methods
• Support for asynchronous mock loading
• Response modifiers to transform mock data
• Debug mode for development
• URL origin configuration
• Automatic mock file generation with type safety

How It Works

1. Generate Mocks: Use "har-to-mocks" to generate mocks from actual server responses.
2. Generate Mock Imports: Use the built-in generator to create type-safe mock imports.
3. Set Up Mock Handler: Use the createMockHandler function provided by "mocks-to-msw" to set up a mock handler.

Automatic Mock Generation

The package includes a CLI tool that automatically generates type-safe mock imports from your JSON mock files.

Setup

Add this to your package.json scripts:

{
  "scripts": {
    "generate-mocks": "generate-mocks --folder='src/mocks/api' --output='src/mocks/mocks.ts'"
  }
}

Project Structure

project/
  ├── src/
  │   └── mocks/
  │       ├── api/                    # Input folder for JSON mocks
  │       │   ├── client/
  │       │   │   └── GET.json
  │       │   └── client/
  │       │       └── application/
  │       │           └── GET.json
  │       └── mocks.ts               # Generated output file

Generated Output

Running the generator will create a mocks.ts file with all your mock imports:

// src/mocks/mocks.ts
const mocks = {
  "/client/GET": import("./api/client/GET.json"),
  "/client/application/GET": import("./api/client/application/GET.json"),
} as const;

export default mocks;

Usage with createMockHandler

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

// Create type-safe mock handler
const { mock } = createMockHandler<keyof typeof mocks>({
  mocks,
  debug: true,
  origin: "https://api.example.com", // optional
});

// Define response types for better type safety
interface User {
  id: string;
  name: string;
  email: string;
}

// Use type-safe mock handlers
export const handlers = [
  // GET request with type-safe response
  mock.get<User>("/client"),

  // POST request with response modifier
  mock.post("/client/application", (user) => ({
    ...user,
    name: user.name.toUpperCase(),
  })),
];

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: Install mocks-to-msw

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

Usage Example

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

// Create type-safe mock handler
const { mock } = createMockHandler<keyof typeof mocks>({
  mocks,
  debug: true,
});

// Type-safe handlers
export const handlers = [
  mock.get("/client"),
  mock.post("/client/application", (data) => ({ ...data, modified: true })),
];

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"?

• Type Safety: Ensures URLs are used with their correct HTTP methods
• Efficient Mock Management: Clear organization of mocks in dedicated folders
• Response Modification: Ability to transform mock data before sending
• Debug Support: Helpful logging during development
• URL Configuration: Optional origin configuration for complete URLs
• Automatic Mock Generation: CLI tool to generate type-safe mock imports