API Response Mocker

API response mocking means creating fake API responses that look exactly like real ones, allowing you to develop and test UI components without a running backend. It's useful for: (1) frontend development before the API is ready, (2) testing error states and edge cases that are hard to trigger in real APIs, (3) CI/CD testing without external dependencies, (4) demoing features without live data.

Use page.route() to intercept requests: await page.route('**/api/users', route => route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(yourMockData) })). Set up the route before page.goto(). You can also use route.abort() to simulate network failures or route.continue() to pass through to the real API selectively.

Copy the generated response body and use it in your MSW handler: import { http, HttpResponse } from 'msw'; export const handlers = [http.get('/api/users', () => HttpResponse.json(yourMockData))]. MSW intercepts at the service worker level, working for both unit tests (with msw/node) and browser testing. It's the recommended approach for React/Next.js projects.

Critical error scenarios to mock: 400 Bad Request (validation errors), 401 Unauthorized (expired/missing token), 403 Forbidden (insufficient permissions), 404 Not Found (resource missing), 409 Conflict (duplicate resource), 422 Unprocessable Entity (business logic error), 429 Too Many Requests (rate limiting), 500 Internal Server Error (unexpected backend failure), 503 Service Unavailable (backend down). Each should return a consistent error envelope your frontend can handle.

An API envelope wraps your data in a consistent structure: { success: true, data: {...}, meta: { page, total } } for success responses, and { success: false, error: { code, message, details } } for errors. Using a consistent envelope means your frontend only needs one error-handling pattern regardless of the endpoint. This tool generates responses following this convention.

Include a meta object with page, perPage, total, and totalPages fields. For a paginated list: { data: [...items], meta: { page: 1, perPage: 20, total: 150, totalPages: 8, hasNextPage: true } }. In your Playwright or MSW setup, you can parameterize the handler to return different pages based on query params: const page = parseInt(url.searchParams.get('page') || '1').