API Mocking and Stubbing

API mocking is a critical technique for frontend developers to create robust, reliable tests without depending on live backend services. By simulating API responses, you can develop and validate frontend components independently, reducing integration complexity and accelerating development cycles.

Prerequisites#

• Node.js (v16+ recommended)
• TypeScript (v4.5+)
• A modern code editor (VS Code preferred)
• Basic understanding of REST APIs
• Familiarity with testing frameworks (Jest, Mocha)

Understanding API Mocking#

What is API Mocking?#

API mocking involves creating artificial, predefined responses that simulate real backend interactions. Instead of making actual network requests, your tests use these mock responses to validate component behavior, error handling, and state management.

Why Mock APIs?#

Key Benefits#

• Faster test execution
• Consistent, reproducible test scenarios
• Independent frontend development
• Comprehensive error handling validation
• Reduced external service dependencies

Mocking Strategies#

Static Mocking#

Static mocks return predefined, hardcoded responses:

const mockUserResponse = {
  id: "user-123",
  name: "Jane Doe",
  email: "[email protected]",
};

function getUserProfile() {
  return Promise.resolve(mockUserResponse);
}

const mockUserResponse = {
  id: "user-123",
  name: "Jane Doe",
  email: "[email protected]",
};

function getUserProfile() {
  return Promise.resolve(mockUserResponse);
}

Dynamic Mocking#

Dynamic mocks generate responses based on input parameters:

function createMockUserResponse(overrides = {}) {
  return {
    id: crypto.randomUUID(),
    name: "Test User",
    email: "[email protected]",
    ...overrides,
  };
}

function createMockUserResponse(overrides = {}) {
  return {
    id: crypto.randomUUID(),
    name: "Test User",
    email: "[email protected]",
    ...overrides,
  };
}

Advanced Mocking Techniques#

Intercepting Network Requests#

Using libraries like Axios Interceptors or Fetch Mocking:

axios.interceptors.request.use((config) => {
  if (config.url.includes("/users")) {
    return Promise.resolve({
      data: createMockUserResponse(),
      status: 200,
    });
  }
  return config;
});

axios.interceptors.request.use((config) => {
  if (config.url.includes("/users")) {
    return Promise.resolve({
      data: createMockUserResponse(),
      status: 200,
    });
  }
  return config;
});

Conditional Mocking#

function mockApiResponse(url: string, conditions = {}) {
  switch (url) {
    case "/users":
      return conditions.includeAdmin
        ? adminUserResponse()
        : standardUserResponse();
    case "/products":
      return productCatalogResponse();
  }
}

function mockApiResponse(url: string, conditions = {}) {
  switch (url) {
    case "/users":
      return conditions.includeAdmin
        ? adminUserResponse()
        : standardUserResponse();
    case "/products":
      return productCatalogResponse();
  }
}

Error Scenario Mocking#

function mockNetworkError() {
  return Promise.reject(new Error("Network Timeout"));
}

function mockAuthenticationError() {
  return Promise.reject({
    status: 401,
    message: "Unauthorized Access",
  });
}

function mockNetworkError() {
  return Promise.reject(new Error("Network Timeout"));
}

function mockAuthenticationError() {
  return Promise.reject({
    status: 401,
    message: "Unauthorized Access",
  });
}

Troubleshooting#

Best Practices#

• Keep mock data realistic and representative
• Use TypeScript interfaces for mock type safety
• Centralize mock generation logic
• Randomize mock data to prevent test staleness
• Include edge cases and error scenarios
• Minimize mock complexity

Next Steps#

• Explore advanced mocking libraries
• Implement comprehensive test coverage
• Learn integration testing techniques
• Investigate contract testing approaches
• Study performance testing with mocks