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: 6 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 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-05T11:30:45.000Z (about 1 year ago)
- Last Synced: 2024-10-29T19:59:46.330Z (11 months 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.
## 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`.
```ts
import { createMockHandler } from "mocks-to-msw";
// Async variation by using the import
// const mocks = {
// '/api/user/1/GET': import('./api/user/1/GET.json'),
// } as const;
const { mock } = createMockHandler({
loader: (path) => require(`.${path}.json`),
// loader: async (path) => mocks[path].then((res) => res.default),
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`_.
```ts
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](https://mswjs.io) for detailed instructions.
#### Step 2: Set up the Mock Handler
Install _"mocks-to-msw"_ as dev dependencies.
```sh
npm install mocks-to-msw --save-dev
```
### Usage example sync/async
```ts
// Using import (async) src/mocks/handlers.js
import { createMockHandler } from "mocks-to-msw";
const mocks = {
"/api/user/1/GET": import("./api/user/1/GET.json"),
} as const;
const { mock } = createMockHandler({
loader: async (path) => mocks[path].then((res) => res.default),
});
export const handlers = [mocks.get("/api/user/1")];
```
```ts
// Using require (sync) 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"_.