100 lines
2.1 KiB
Markdown
100 lines
2.1 KiB
Markdown
# @admin-pkg/vite-plugin-msw
|
|
|
|
Mock Service Worker browser and node integration for Vite.
|
|
|
|
## Usage
|
|
|
|
### Install
|
|
|
|
```sh
|
|
npm install --save-dev @admin-pkg/vite-plugin-msw
|
|
# yarn add --dev @admin-pkg/vite-plugin-msw
|
|
# pnpm add --save-dev @admin-pkg/vite-plugin-msw
|
|
```
|
|
|
|
### Define mocks
|
|
|
|
https://mswjs.io/docs/getting-started/mocks
|
|
|
|
---
|
|
|
|
## Config
|
|
|
|
```ts
|
|
interface VitePluginMswOptions {
|
|
handlers?: RequestHandler[];
|
|
mode?: 'browser' | 'node';
|
|
build?: boolean;
|
|
}
|
|
```
|
|
|
|
### Handlers
|
|
|
|
- Optional
|
|
|
|
MSW handlers. More information on how to define these: https://mswjs.io/docs/getting-started/mocks
|
|
|
|
### Mode
|
|
|
|
- Optional
|
|
- Default: `browser`
|
|
|
|
#### Browser
|
|
|
|
To start MSW in the client, please follow the [Configure worker step](https://mswjs.io/docs/getting-started/integrate/browser#configure-worker) and [Start worker step](https://mswjs.io/docs/getting-started/integrate/browser#start-worker) in the MSW docs. The `mockServiceWorker.js` file will be provided by the Vite Dev Server.
|
|
|
|
##### Example vite application
|
|
|
|
```ts
|
|
import { enableMocking } from '@admin-pkg/vite-plugin-msw';
|
|
import { HttpHandler } from 'msw';
|
|
|
|
const modules = import.meta.glob<any>('./**/*.ts', {
|
|
eager: true,
|
|
});
|
|
|
|
export const setupMock = async () => {
|
|
const handlers = Object.values(modules).reduce<HttpHandler[]>((prev, curr) => {
|
|
const arr = curr?.default;
|
|
if (Array.isArray(arr)) {
|
|
arr.forEach((item) => {
|
|
if (item instanceof HttpHandler) {
|
|
prev.push(item);
|
|
}
|
|
});
|
|
}
|
|
return prev;
|
|
}, []);
|
|
// console.log('handlers', handlers);
|
|
await enableMocking(handlers);
|
|
};
|
|
```
|
|
|
|
#### Node
|
|
|
|
This will handle the mocked service worker handlers via a Vite Dev Server plugin.
|
|
|
|
##### Add to Vite config
|
|
|
|
```ts
|
|
// Import plugin
|
|
import msw from '@admin-pkg/vite-plugin-msw';
|
|
|
|
// Import msw handlers
|
|
import { handlers } from '../mocks/handlers';
|
|
|
|
// Pass them to plugin
|
|
export default defineConfig({
|
|
plugins: [msw({ handlers })],
|
|
});
|
|
```
|
|
|
|
### Build
|
|
|
|
- Optional
|
|
- Default: `false`
|
|
|
|
A true value will output MSW's `mockServiceWorker.js` file to the Vite build directory, in case if MSW is needed in production.
|
|
|
|
---
|