39Mocking Strategies (deep-dive)

39.1 The test double zoo (Meszaros / Fowler)

39.2 When to mock — decision tree

1. Is the dependency under your team's control?   NO → mock (external API, third-party SaaS).
2. Is it slow or expensive?   YES → mock (LLM, payments, email).
3. Is it flaky / has timing?   YES → mock (analytics, real-time feeds).
4. Is the dependency itself what you're testing?   YES → don't mock.
5. Is it a contract test?   YES → use contract testing (Pact), not free-form mocks.

39.3 Network mocking — Playwright route

// Fulfill (full mock)
await page.route('**/api/users/*', route => route.fulfill({
  status: 200,
  contentType: 'application/json',
  body: JSON.stringify({ id: 1, name: 'Mock' }),
}));

// Continue + modify
await page.route('**/api/orders', async route => {
  const body = JSON.parse(route.request().postData() || '{}');
  body.coupon = 'TEST50';
  await route.continue({ postData: JSON.stringify(body) });
});

// Abort
await page.route(/analytics|hotjar/, r => r.abort());

// Conditional — first request real, then mock
let count = 0;
await page.route('**/api/x', async route => {
  count++;
  if (count === 1) await route.continue();
  else await route.fulfill({ status: 500 });
});

39.4 MSW — Mock Service Worker (frontend ecosystem)

MSW intercepts fetch / XHR in the browser via a service worker (or in Node via interceptors). Same mocks used in app dev, unit tests, Storybook AND Playwright tests = no duplication.

// mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/users/:id', ({ params }) => {
    return HttpResponse.json({ id: params.id, name: 'Alice' });
  }),
  http.post('/api/orders', async ({ request }) => {
    const body = await request.json() as any;
    return HttpResponse.json({ id: 'ord-1', ...body }, { status: 201 });
  }),
];

39.5 Other network mockers

39.6 DB mocking

39.7 Time mocking

// Playwright clock API — freeze time in the browser
await page.clock.install({ time: new Date('2026-01-15T10:00:00Z') });
await page.goto('/dashboard');
/* Date.now() / new Date() in the page returns the frozen time */
await page.clock.setSystemTime(new Date('2026-01-16T10:00:00Z'));
await page.clock.fastForward(60_000);   // advance by 60s

// Jest/Vitest — for unit tests
vi.useFakeTimers();
vi.setSystemTime(new Date('2026-01-15'));
// ... test setTimeout / Date behaviour ...
vi.advanceTimersByTime(5_000);
vi.useRealTimers();

39.8 Filesystem mocking

// memfs — in-memory FS for Node
import { fs as memfs } from 'memfs';
import { vi } from 'vitest';

vi.mock('fs/promises', () => memfs.promises);
// Now any code under test that reads/writes files hits memfs, not your real disk

39.9 Verifying interactions (true mocks)

// Vitest example
import { vi, expect } from 'vitest';

const send = vi.fn();
await new Notifier(send).notify('user-1', 'Hello');

expect(send).toHaveBeenCalledOnce();
expect(send).toHaveBeenCalledWith({ to: 'user-1', body: 'Hello' });

39.10 The mock-everything anti-pattern

• If a test passes "because everything is mocked", it tests nothing.
• Mock external dependencies, not the function you're testing.
• Don't mock the standard library — too brittle, too coupled.
• Don't assert on internal call sequences if a public outcome is the same — tests break on harmless refactors.

39.11 Contract testing as the alternative

Free-form mocks decouple your test from the real API — but also from changes to the real API. If the producer updates the schema and you don't, your tests pass while prod breaks. Contract testing (Pact) publishes the contract to a broker; the producer's CI verifies it. Mocks stay in sync with the real API.