Why I Stopped Mocking `fetch` and Reached for MSW

// Stage 1: the pattern most engineers reach for first.
// Mock fetch directly in the test file, then live with the consequences.

type JsonValue = string | number | boolean | null | JsonValue[] | { [k: string]: JsonValue };

const realFetch = globalThis.fetch;
let mockResponses: Array<{ urlPattern: RegExp; status: number; body: JsonValue }> = [];

function mockFetch() {
    globalThis.fetch = (async (url: string | URL, _init?: RequestInit) => {
        const target = url.toString();
        const hit = mockResponses.find((m) => m.urlPattern.test(target));
        if (!hit) throw new Error(`unmocked URL: ${target}`);
        return new Response(JSON.stringify(hit.body), {
            status: hit.status,
            headers: { 'content-type': 'application/json' },
        });
    }) as typeof fetch;
}
function restoreFetch() { globalThis.fetch = realFetch; }

async function getUser(id: string) {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`http_${res.status}`);
    return res.json();
}

async function run() {
    mockFetch();
    // 'Test 1' wires its mocks.
    mockResponses = [{ urlPattern: /\/api\/users\/7$/, status: 200, body: { id: 7, name: 'Ada' } }];
    console.log('test 1 got:', await getUser('7'));

    // 'Test 2' forgets to reset; tries an unmocked URL and the test crashes.
    try {
        await getUser('99');
    } catch (e) {
        console.log('test 2 surfaced the leak:', (e as Error).message);
    }
    restoreFetch();
}
run();

// Stage 2: the MSW shape rewritten without `import` so the playground runs it.
// In a real project: `import { http, HttpResponse } from 'msw'`.
//                    `import { setupServer } from 'msw/node'`.

type Handler = {
    method: string;
    pattern: RegExp;
    resolve: (params: { url: string }) => Response | Promise<Response>;
};

function http_get(pattern: RegExp, resolve: Handler['resolve']): Handler {
    return { method: 'GET', pattern, resolve };
}
function http_post(pattern: RegExp, resolve: Handler['resolve']): Handler {
    return { method: 'POST', pattern, resolve };
}

function setupServer(...handlers: Handler[]) {
    const realFetch = globalThis.fetch;
    let active = handlers.slice();
    globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
        const url = typeof input === 'string' ? input : (input as Request).url ?? input.toString();
        const method = (init && init.method) || 'GET';
        const hit = active.find((h) => h.method === method && h.pattern.test(url));
        if (!hit) throw new Error(`MSW: unmatched ${method} ${url}`);
        return hit.resolve({ url });
    }) as typeof fetch;
    return {
        listen() { /* called once per test file */ },
        use(...extra: Handler[]) { active = [...extra, ...active]; },
        resetHandlers() { active = handlers.slice(); },
        close() { globalThis.fetch = realFetch; },
    };
}

// Define handlers ONCE for the whole test suite.
const server = setupServer(
    http_get(/\/api\/users\/(\d+)$/, ({ url }) => {
        const id = Number(url.match(/users\/(\d+)/)![1]);
        return new Response(JSON.stringify({ id, name: `User ${id}` }), {
            status: 200, headers: { 'content-type': 'application/json' },
        });
    }),
    http_post(/\/api\/orders$/, async () =>
        new Response(JSON.stringify({ id: 'ord_1', status: 'paid' }), { status: 201 }),
    ),
);
server.listen();

async function run() {
    const u = await fetch('/api/users/7').then((r) => r.json());
    const o = await fetch('/api/orders', { method: 'POST', body: '{}' }).then((r) => r.json());
    console.log('user:', u);
    console.log('order:', o);
}
run().then(() => server.close());

// Stage 3: override one endpoint for one test only.
// Inlines the mini-MSW from stage 2 so this runs standalone.

type Handler = { method: string; pattern: RegExp; resolve: (p: { url: string }) => Response | Promise<Response> };

function setupServer(...handlers: Handler[]) {
    const realFetch = globalThis.fetch;
    const defaults = handlers.slice();
    let active = handlers.slice();
    globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
        const url = typeof input === 'string' ? input : input.toString();
        const method = (init && init.method) || 'GET';
        const hit = active.find((h) => h.method === method && h.pattern.test(url));
        if (!hit) throw new Error(`MSW: unmatched ${method} ${url}`);
        return hit.resolve({ url });
    }) as typeof fetch;
    return {
        use(...extra: Handler[]) { active = [...extra, ...active]; },
        resetHandlers() { active = defaults.slice(); },
        close() { globalThis.fetch = realFetch; },
    };
}
function http_get(pattern: RegExp, resolve: Handler['resolve']): Handler { return { method: 'GET', pattern, resolve }; }

const json = (body: unknown, status = 200) =>
    new Response(JSON.stringify(body), { status, headers: { 'content-type': 'application/json' } });

// Default: a happy /api/users response shared by every test.
const server = setupServer(
    http_get(/\/api\/users\/\d+$/, () => json({ id: 7, name: 'Ada' })),
);

async function happyPath() {
    return fetch('/api/users/7').then((r) => r.json());
}

async function errorPath() {
    // Override JUST for this test: simulate a 503.
    server.use(http_get(/\/api\/users\/\d+$/, () => json({ code: 'upstream' }, 503)));
    try {
        const r = await fetch('/api/users/7');
        if (!r.ok) throw new Error(`http_${r.status}`);
    } catch (e) {
        return (e as Error).message;
    } finally {
        server.resetHandlers();
    }
}

async function run() {
    console.log('happy 1:', await happyPath());
    console.log('error path:', await errorPath());
    console.log('happy 2 (defaults restored):', await happyPath());
}
run().then(() => server.close());