msw-fetch-mock 0.2.1 → 0.3.1

package/README.md

@@ -8,6 +8,13 @@ Undici-style fetch mock API built on [MSW](https://mswjs.io/) (Mock Service Work
 
 If you're familiar with Cloudflare Workers' `fetchMock` (from `cloudflare:test`) or Node.js undici's `MockAgent`, you already know this API.
 
+Supports both **Node.js** (`msw/node`) and **Browser** (`msw/browser`) environments via subpath exports.
+
+## Requirements
+
+- **Node.js** >= 18
+- **MSW** ^1.0.0 (via `/legacy`) or ^2.12.7
+
 ## Install
 
 ```bash
@@ -18,10 +25,12 @@ npm install -D msw-fetch-mock msw
 
 ## Quick Start
 
-### Standalone (Cloudflare migration)
+### Node.js (Vitest, Jest)
 
 ```typescript
+// Works with default import or explicit /node subpath
 import { fetchMock } from 'msw-fetch-mock';
+// import { fetchMock } from 'msw-fetch-mock/node';
 
 beforeAll(() => fetchMock.activate({ onUnhandledRequest: 'error' }));
 afterAll(() => fetchMock.deactivate());
@@ -43,6 +52,25 @@ it('mocks a GET request', async () => {
 });
 ```
 
+### Browser (Storybook, Vitest Browser Mode)
+
+```typescript
+import { setupWorker } from 'msw/browser';
+import { createFetchMock } from 'msw-fetch-mock/browser';
+
+const worker = setupWorker();
+const fetchMock = createFetchMock(worker);
+
+beforeAll(async () => {
+  await fetchMock.activate({ onUnhandledRequest: 'error' });
+});
+afterAll(() => fetchMock.deactivate());
+afterEach(() => {
+  fetchMock.assertNoPendingInterceptors();
+  fetchMock.reset();
+});
+```
+
 ### With an existing MSW server
 
 If you already use MSW, pass your server to share a single interceptor:
@@ -51,9 +79,10 @@ If you already use MSW, pass your server to share a single interceptor:
 import { setupServer } from 'msw/node';
 import { http, HttpResponse } from 'msw';
 import { FetchMock } from 'msw-fetch-mock';
+import { NodeMswAdapter } from 'msw-fetch-mock/node';
 
 const server = setupServer(http.get('/api/users', () => HttpResponse.json([{ id: 1 }])));
-const fetchMock = new FetchMock(server);
+const fetchMock = new FetchMock(new NodeMswAdapter(server));
 
 beforeAll(() => server.listen());
 afterAll(() => server.close());
@@ -63,7 +92,27 @@ afterEach(() => {
 });
 ```
 
-> **Note:** Only one MSW server can be active at a time. If another server is already listening, standalone `activate()` will throw an error guiding you to use `new FetchMock(server)` instead.
+> **Note:** Only one MSW server can be active at a time. If another server is already listening, standalone `activate()` will throw an error guiding you to use `new FetchMock(new NodeMswAdapter(server))` instead.
+
+### Legacy (MSW v1)
+
+```typescript
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { createFetchMock } from 'msw-fetch-mock/legacy';
+
+const server = setupServer();
+const fetchMock = createFetchMock(rest, server);
+
+beforeAll(() => fetchMock.activate());
+afterAll(() => fetchMock.deactivate());
+afterEach(() => {
+  fetchMock.assertNoPendingInterceptors();
+  fetchMock.reset();
+});
+```
+
+See [MSW v1 Legacy Guide](docs/msw-v1-legacy.md) for details.
 
 ## Unhandled Requests
 
@@ -93,19 +142,37 @@ fetchMock.activate({
 
 ## API Overview
 
+### Import Paths
+
+| Path                     | Environment                  | MSW version |
+| ------------------------ | ---------------------------- | ----------- |
+| `msw-fetch-mock`         | Node.js (re-exports `/node`) | v2          |
+| `msw-fetch-mock/node`    | Node.js                      | v2          |
+| `msw-fetch-mock/browser` | Browser                      | v2          |
+| `msw-fetch-mock/legacy`  | Node.js (MSW v1)             | v1          |
+
 ### `fetchMock` (singleton)
 
 A pre-built `FetchMock` instance for standalone use. Import and call `activate()` — no setup needed.
+Available from `msw-fetch-mock` and `msw-fetch-mock/node`.
 
-### `new FetchMock(server?)`
+### `createFetchMock(server?)` / `createFetchMock(worker)`
 
-Creates a `FetchMock` instance. Pass an existing MSW `SetupServer` to share interceptors; omit to create one internally.
+Factory function that creates a `FetchMock` with the appropriate adapter.
+
+- Node: `createFetchMock(server?)` — optionally pass an existing MSW `SetupServer`
+- Browser: `createFetchMock(worker)` — pass an MSW `SetupWorker` (required)
+- Legacy: `createFetchMock(rest, server?)` — pass MSW v1 `rest` object
+
+### `new FetchMock(adapter?)`
+
+Creates a `FetchMock` instance with an explicit `MswAdapter`. Use `NodeMswAdapter` or `BrowserMswAdapter`.
 
 ### Intercepting & Replying
 
 ```typescript
 fetchMock
-  .get(origin)                              // select origin
+  .get(origin)                              // string, RegExp, or function
   .intercept({ path, method, headers, body, query })  // match criteria
   .reply(status, body, options)             // define response
   .times(n) / .persist();                   // repeat control
@@ -127,10 +194,49 @@ fetchMock.assertNoPendingInterceptors(); // throws if unconsumed interceptors re
 fetchMock.reset(); // clears interceptors + call history + handlers
 ```
 
+## Tested Environments
+
+E2E tests run on every CI push across these environments:
+
+| Environment    | Module System | Test Framework      |
+| -------------- | ------------- | ------------------- |
+| Jest ESM       | ESM (import)  | Jest                |
+| Jest CJS       | CJS (require) | Jest                |
+| Node.js Test   | ESM (import)  | Node test runner    |
+| Node.js CJS    | CJS (require) | Node test runner    |
+| Vitest Browser | ESM (import)  | Vitest + Playwright |
+
 ## Documentation
 
 - [API Reference](docs/api.md) — full API details, matching options, reply callbacks
 - [Cloudflare Workers Migration](docs/cloudflare-migration.md) — migrating from `cloudflare:test` fetchMock
+- [MSW v1 Legacy Guide](docs/msw-v1-legacy.md) — using msw-fetch-mock with MSW v1
+
+## Development
+
+```bash
+pnpm install
+pnpm build        # build with tsup
+pnpm test         # unit tests (vitest)
+pnpm test:e2e     # e2e tests (jest-esm, jest-cjs, node-test, node-cjs)
+```
+
+### E2E Tests
+
+E2E tests verify the published package works across different runtimes and module systems. The script builds, packs a tarball via `npm pack`, and installs it into each `e2e/` project — mirroring CI exactly.
+
+```bash
+# Run default suites (skip vitest-browser)
+pnpm test:e2e
+
+# Run a single suite
+pnpm test:e2e -- node-cjs
+
+# Run all suites including vitest-browser (auto-installs Playwright)
+pnpm test:e2e -- --all
+```
+
+Available suites: `jest-esm`, `jest-cjs`, `node-test`, `node-cjs`, `vitest-browser`
 
 ## License
 

package/dist/browser.cjs

@@ -0,0 +1,43 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkHYRDB2FHcjs = require('./chunk-HYRDB2FH.cjs');
+
+
+
+
+var _chunk43CWIVXOcjs = require('./chunk-43CWIVXO.cjs');
+
+// src/browser-adapter.ts
+var BrowserMswAdapter = class {
+  
+  constructor(worker) {
+    this.worker = worker;
+  }
+  use(...handlers) {
+    this.worker.use(...handlers);
+  }
+  resetHandlers(...handlers) {
+    this.worker.resetHandlers(...handlers);
+  }
+  async activate(options) {
+    await this.worker.start({
+      onUnhandledRequest: options.onUnhandledRequest
+    });
+  }
+  deactivate() {
+    this.worker.stop();
+  }
+};
+
+// src/browser.ts
+_chunk43CWIVXOcjs.FetchMock._handlerFactory = _chunkHYRDB2FHcjs.v2HandlerFactory;
+function createFetchMock(worker) {
+  return new (0, _chunk43CWIVXOcjs.FetchMock)(new BrowserMswAdapter(worker));
+}
+
+
+
+
+
+
+exports.BrowserMswAdapter = BrowserMswAdapter; exports.FetchMock = _chunk43CWIVXOcjs.FetchMock; exports.MockCallHistory = _chunk43CWIVXOcjs.MockCallHistory; exports.MockCallHistoryLog = _chunk43CWIVXOcjs.MockCallHistoryLog; exports.createFetchMock = createFetchMock;

package/dist/browser.d.cts

@@ -0,0 +1,15 @@
+import { M as MswAdapter, S as SetupWorkerLike, R as ResolvedActivateOptions, F as FetchMock } from './fetch-mock-BNke4Oik.cjs';
+export { A as ActivateOptions, C as CallHistoryFilterCriteria, H as HandlerFactory, I as InterceptOptions, a as MockCallHistory, b as MockCallHistoryLog, c as MockCallHistoryLogData, d as MockInterceptor, e as MockPool, f as MockReplyChain, O as OnUnhandledRequest, P as PendingInterceptor, g as ReplyOptions } from './fetch-mock-BNke4Oik.cjs';
+
+declare class BrowserMswAdapter implements MswAdapter {
+    private readonly worker;
+    constructor(worker: SetupWorkerLike);
+    use(...handlers: Array<unknown>): void;
+    resetHandlers(...handlers: Array<unknown>): void;
+    activate(options: ResolvedActivateOptions): Promise<void>;
+    deactivate(): void;
+}
+
+declare function createFetchMock(worker: SetupWorkerLike): FetchMock;
+
+export { BrowserMswAdapter, FetchMock, MswAdapter, SetupWorkerLike, createFetchMock };

package/dist/browser.d.ts

@@ -0,0 +1,15 @@
+import { M as MswAdapter, S as SetupWorkerLike, R as ResolvedActivateOptions, F as FetchMock } from './fetch-mock-BNke4Oik.js';
+export { A as ActivateOptions, C as CallHistoryFilterCriteria, H as HandlerFactory, I as InterceptOptions, a as MockCallHistory, b as MockCallHistoryLog, c as MockCallHistoryLogData, d as MockInterceptor, e as MockPool, f as MockReplyChain, O as OnUnhandledRequest, P as PendingInterceptor, g as ReplyOptions } from './fetch-mock-BNke4Oik.js';
+
+declare class BrowserMswAdapter implements MswAdapter {
+    private readonly worker;
+    constructor(worker: SetupWorkerLike);
+    use(...handlers: Array<unknown>): void;
+    resetHandlers(...handlers: Array<unknown>): void;
+    activate(options: ResolvedActivateOptions): Promise<void>;
+    deactivate(): void;
+}
+
+declare function createFetchMock(worker: SetupWorkerLike): FetchMock;
+
+export { BrowserMswAdapter, FetchMock, MswAdapter, SetupWorkerLike, createFetchMock };

package/dist/browser.js

@@ -0,0 +1,43 @@
+import {
+  v2HandlerFactory
+} from "./chunk-D26SJTTI.js";
+import {
+  FetchMock,
+  MockCallHistory,
+  MockCallHistoryLog
+} from "./chunk-ATXIIOZA.js";
+
+// src/browser-adapter.ts
+var BrowserMswAdapter = class {
+  worker;
+  constructor(worker) {
+    this.worker = worker;
+  }
+  use(...handlers) {
+    this.worker.use(...handlers);
+  }
+  resetHandlers(...handlers) {
+    this.worker.resetHandlers(...handlers);
+  }
+  async activate(options) {
+    await this.worker.start({
+      onUnhandledRequest: options.onUnhandledRequest
+    });
+  }
+  deactivate() {
+    this.worker.stop();
+  }
+};
+
+// src/browser.ts
+FetchMock._handlerFactory = v2HandlerFactory;
+function createFetchMock(worker) {
+  return new FetchMock(new BrowserMswAdapter(worker));
+}
+export {
+  BrowserMswAdapter,
+  FetchMock,
+  MockCallHistory,
+  MockCallHistoryLog,
+  createFetchMock
+};