@admin-pkg/vite-plugin-msw

Mock Service Worker browser and node integration for Vite.

Usage

Install

1npm install --save-dev @admin-pkg/vite-plugin-msw
2# yarn add --dev @admin-pkg/vite-plugin-msw
3# pnpm add --save-dev @admin-pkg/vite-plugin-msw

Define mocks

https://mswjs.io/docs/getting-started/mocks

---

Config

1interface VitePluginMswOptions {
2  handlers?: RequestHandler[];
3  mode?: 'browser' | 'node';
4  build?: boolean;
5}

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 and Start worker step in the MSW docs. The mockServiceWorker.js file will be provided by the Vite Dev Server.

Example vite application

1import { enableMocking } from '@admin-pkg/vite-plugin-msw';
2import { HttpHandler } from 'msw';
3
4const modules = import.meta.glob<any>('./**/*.ts', {
5  eager: true,
6});
7
8export const setupMock = async () => {
9  const handlers = Object.values(modules).reduce<HttpHandler[]>((prev, curr) => {
10    const arr = curr?.default;
11    if (Array.isArray(arr)) {
12      arr.forEach((item) => {
13        if (item instanceof HttpHandler) {
14          prev.push(item);
15        }
16      });
17    }
18    return prev;
19  }, []);
20  // console.log('handlers', handlers);
21  await enableMocking(handlers);
22};

Node

This will handle the mocked service worker handlers via a Vite Dev Server plugin.

Add to Vite config

1// Import plugin
2import msw from '@admin-pkg/vite-plugin-msw';
3
4// Import msw handlers
5import { handlers } from '../mocks/handlers';
6
7// Pass them to plugin
8export default defineConfig({
9  plugins: [msw({ handlers })],
10});

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.

---