https://github.com/peterknezek/mocks-to-msw
An adapter that provides mocks generated from the har-to-mocks to the MSW.
https://github.com/peterknezek/mocks-to-msw
api front-end handler har har-to-mocks mock mocking mocks msw
Last synced: 7 months ago
JSON representation
An adapter that provides mocks generated from the har-to-mocks to the MSW.
- Host: GitHub
- URL: https://github.com/peterknezek/mocks-to-msw
- Owner: peterknezek
- License: mit
- Created: 2024-01-22T10:54:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-05T11:30:45.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T19:59:46.330Z (almost 2 years ago)
- Topics: api, front-end, handler, har, har-to-mocks, mock, mocking, mocks, msw
- Language: TypeScript
- Homepage:
- Size: 169 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mocks-to-msw
An adapter that provides mocks generated from the [har-to-mocks](https://github.com/peterknezek/har-to-mocks) to the MSW.
[](https://npmjs.org/package/mocks-to-msw)
[](https://npmjs.org/package/mocks-to-msw)
[](https://github.com/peterknezek/mocks-to-msw/blob/master/package.json)
## 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](https://github.com/peterknezek/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:
```json
{
"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:
```ts
// 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
```ts
import { createMockHandler } from "mocks-to-msw";
import mocks from "./mocks/mocks";
// Create type-safe mock handler
const { mock } = createMockHandler({
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("/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](https://mswjs.io) for detailed instructions.
#### Step 2: Install mocks-to-msw
```sh
npm install mocks-to-msw --save-dev
```
### Usage Example
```ts
import { createMockHandler } from "mocks-to-msw";
import mocks from "./mocks/mocks";
// Create type-safe mock handler
const { mock } = createMockHandler({
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