Generating Realistic Mock Data for APIs: MSW, Faker, and JSON Schemas

Frontend development and automated testing frequently stall while waiting for backend APIs to be built, deployed, or populated with test fixtures. Even when backend staging servers exist, testing against volatile shared environments leads to flaky tests, rate-limiting hurdles, and unpredictable state.

Generating high-fidelity, schema-compliant synthetic mock data allows engineering teams to develop UI components in isolation, simulate edge cases (empty states, massive text overruns, network timeouts), and execute robust unit/E2E test suites without touching live databases.

This guide explores modern strategies for synthetic data generation using Faker, JSON Schema specifications, and Mock Service Worker (MSW 2.0).

---

1. The Hierarchy of API Mocking Strategies

Mocking Approach	How it Works	Pros	Cons	Best For
Hardcoded Static JSON	Static .json files imported directly into frontend components.	Instant setup, zero dependencies.	Stale data, tightly coupled to components, no network realism.	Quick UI wireframing.
Schema-Driven Synthetic Generators	Generates dynamic records using JSON Schema or TypeScript definitions + Faker.	High realism, handles relationships, edge-case variations.	Requires schema definition.	Contract testing, load testing, Storybook.
Network-Level Interception (MSW 2.0)	Service Workers intercept fetch/XMLHttpRequest at the network layer.	Identical code paths in dev & prod, supports REST & GraphQL.	Minor initial setup.	Production-grade frontend development & Playwright/Vitest tests.

---

2. Generating Schema-Compliant Data with JSON Schema

Rather than hand-crafting mock arrays, you can declare the contract using JSON Schema and infer valid mock instances:

JSON Schema Contract

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "properties": {
    "id": { "type": "string", "format": "uuid" },
    "name": { "type": "string" },
    "email": { "type": "string", "format": "email" },
    "role": { "type": "string", "enum": ["admin", "member", "viewer"] },
    "createdAt": { "type": "string", "format": "date-time" },
    "metrics": {
      "type": "object",
      "properties": {
        "loginCount": { "type": "integer", "minimum": 0, "maximum": 500 }
      },
      "required": ["loginCount"]
    }
  },
  "required": ["id", "name", "email", "role", "createdAt"]
}

This ensures generated data conforms strictly to validation constraints (minimum, maximum, enum, format: uuid).

---

3. Integrating Mock Service Worker (MSW 2.0)

Mock Service Worker intercepts requests at the network boundary using standard Service Worker APIs in the browser and class interceptors in Node.js (Vitest / Playwright).

1. Define Request Handlers

// src/mocks/handlers.ts
import { http, HttpResponse, delay } from 'msw';
import { generateMockUser } from './generators';

export const handlers = [
  // Mock GET /api/users
  http.get('/api/users', async ({ request }) => {
    const url = new URL(request.url);
    const limit = Number(url.searchParams.get('limit')) || 10;

    // Simulate realistic network latency (150ms)
    await delay(150);

    const users = Array.from({ length: limit }, () => generateMockUser());

    return HttpResponse.json({
      data: users,
      meta: { total: 100, count: users.length },
    });
  }),

  // Simulate Error Edge Cases (e.g., 401 Unauthorized or 429 Rate Limit)
  http.post('/api/users', async ({ request }) => {
    const authHeader = request.headers.get('Authorization');
    if (!authHeader) {
      return new HttpResponse(null, { status: 401, statusText: 'Unauthorized' });
    }

    const payload = await request.json();
    return HttpResponse.json({ success: true, user: payload }, { status: 201 });
  }),
];

2. Initialize in Browser / Test Runners

// Browser entry point (src/mocks/browser.ts)
import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

// Enable only in development mode:
if (process.env.NODE_ENV === 'development') {
  await worker.start({ onUnhandledRequest: 'bypass' });
}

---

4. Modeling Realistic Relational Datasets

Real applications rarely operate on isolated flat objects. To test complex UI dashboards, your mock generator should maintain referential integrity across parent-child relationships:

export interface Organization {
  id: string;
  name: string;
  domain: string;
}

export interface User {
  id: string;
  orgId: string;
  fullName: string;
  email: string;
}

export function generateSeedDataset(orgCount = 3, usersPerOrg = 5) {
  const orgs: Organization[] = Array.from({ length: orgCount }, (_, i) => ({
    id: `org_${i + 1}`,
    name: `Acme Corp ${i + 1}`,
    domain: `acme${i + 1}.com`,
  }));

  const users: User[] = orgs.flatMap((org) =>
    Array.from({ length: usersPerOrg }, (_, j) => ({
      id: `usr_${org.id}_${j + 1}`,
      orgId: org.id,
      fullName: `User ${j + 1} (${org.name})`,
      email: `user${j + 1}@${org.domain}`,
    }))
  );

  return { orgs, users };
}

---

5. Testing UI Chaos & Edge Cases

Do not restrict synthetic data to ideal "happy path" fixtures. Purposefully inject boundary conditions:

1. Extreme String Lengths: Test international names, non-Latin UTF-8 scripts, and long unbroken words to catch CSS layout breaks.
2. Nullable / Optional Fields: Verify your UI gracefully renders empty avatars, missing phone numbers, and unverified email badges.
3. HTTP Failure Simulation: Use MSW to simulate network drops (HttpResponse.error()), HTTP 504 Gateway Timeout, and HTTP 422 Unprocessable Entity validation responses.

---

6. Synthetic Data Hygiene & Security Checklist

• Never Use Production PII: Never scrub and reuse production customer databases in test environments without complete irreversible anonymization.
• Deterministic RNG Seeding: In automated regression test suites, seed your random number generator (faker.seed(12345)) so test runs produce identical snapshots across CI workers.

Use the Mock Data Generator to quickly generate realistic JSON datasets, JSON to Schema to infer validation rules, and JSON Formatter to inspect and clean payloads.