API Mock Generator

About API Mock Generator

This API mock generator creates lightweight mock request and response objects for testing and documentation. It generates JavaScript code that can be used directly in frontend applications, test suites, or API documentation.

Mock Response Structure

The generated mock contains two main parts:

1. Request Definition: HTTP method and endpoint URL
2. Response Definition: Status code, headers, and body

Generated Mock Example:

const mock = {
  request: {
    method: "GET",
    url: "/api/users"
  },
  response: {
    status: 200,
    headers: {
      "Content-Type": "application/json"
    },
    body: {
      "success": true,
      "data": {
        "id": 1,
        "name": "John Doe",
        "email": "[email protected]"
      }
    }
  }
};

return new Response(JSON.stringify(mock.response.body), {
  status: mock.response.status,
  headers: mock.response.headers
});

Common HTTP Status Codes for Mocks

Common Response Headers

Mock Data Best Practices

• Use realistic data: Valid email formats, proper phone numbers, real-looking names
• Follow schemas: Match the expected API contract - field names, types, nesting
• Include edge cases: Empty arrays, null values, max-length strings
• ISO 8601 dates: Use "2025-01-15T10:30:00Z" format for timestamps
• Consistent IDs: Use integers or UUIDs consistently across mocks
• Error messages: Include user-friendly error messages for 4xx/5xx responses

Common Use Cases

• Frontend Development: Build UIs before backend APIs are ready
• Unit Testing: Provide predictable responses for component tests
• Integration Testing: Test API client behavior with various status codes
• API Documentation: Show example request/response pairs
• Prototyping: Demo applications without live backend
• Training: Create safe environments for learning APIs

Integration with Testing Libraries

// Jest + MSW (Mock Service Worker)
import { rest } from 'msw';

rest.get('/api/users', (req, res, ctx) => {
  return res(
    ctx.status(200),
    ctx.json({
      success: true,
      data: { id: 1, name: 'John Doe' }
    })
  );
});

// Cypress
cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: { success: true, data: {...} }
});

// Fetch API mock
const mockResponse = new Response(
  JSON.stringify({ success: true }),
  { status: 200, headers: { 'Content-Type': 'application/json' } }
);