Mocking API Endpoints with Jest for Robust Frontend Testing

In modern web development, frontend applications frequently interact with backend APIs to fetch and send data. Testing these applications effectively requires isolating the frontend logic from actual network requests, which can be slow, unreliable, and incur costs. This challenge focuses on implementing a mock server using Jest to simulate API responses, enabling faster, more predictable, and robust frontend testing.

Problem Description

Your task is to create a robust testing setup for a simple frontend application that fetches data from a REST API. You will use Jest to mock the API calls, allowing you to control the responses and test various scenarios without making actual HTTP requests.

What needs to be achieved:

1. Mock API Responses: Configure Jest to intercept outgoing HTTP requests made by your frontend code and return predefined responses.
2. Test Data Fetching: Write Jest tests for a function that fetches data from a mock API endpoint.
3. Handle Different HTTP Methods: Demonstrate mocking for different HTTP methods (GET, POST).
4. Simulate Errors: Test how your frontend code handles API errors.

Key Requirements:

• Use Jest's built-in mocking capabilities.
• The mock server should simulate a GET request to /users and a POST request to /todos.
• You should be able to mock successful responses (e.g., arrays of users, success messages for creating todos).
• You should be able to mock error responses (e.g., 404 Not Found, 500 Internal Server Error).
• The solution should be written in TypeScript.

Expected Behavior:

When tests are run, they should execute without making any actual network requests. The frontend code will receive the mocked data or error states as if it were communicating with a real server.

Important Edge Cases to Consider:

• What happens if the API returns an empty array?
• How does your code handle unexpected response structures (though for this challenge, we'll stick to defined structures)?
• Network timeouts (can be simulated by delaying mock responses).

Examples

Example 1: Mocking a GET request for users

Let's assume you have a function fetchUsers that makes a GET request to /users.

Input (Simulated Frontend Behavior):

Your test will call fetchUsers().

Expected Mocked API Response:

[
  {"id": 1, "name": "Alice"},
  {"id": 2, "name": "Bob"}
]

Expected Frontend Output (after fetchUsers is called and mocked):

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

Explanation:

The test intercepts the GET /users request and returns the predefined JSON array. Your fetchUsers function receives this array and returns it.

Example 2: Mocking a POST request to create a todo

Let's assume you have a function createTodo that makes a POST request to /todos.

Input (Simulated Frontend Behavior):

Your test will call createTodo({ title: "Learn Jest", completed: false }).

Expected Mocked API Response:

{"id": 101, "title": "Learn Jest", "completed": false, "userId": 1}

Expected Frontend Output (after createTodo is called and mocked):

{ "id": 101, "title": "Learn Jest", "completed": false, "userId": 1 }

Explanation:

The test intercepts the POST /todos request with a specific payload and returns a successful response, simulating the creation of a new todo item.

Example 3: Mocking an API error

Let's assume fetchUsers can encounter an error.

Input (Simulated Frontend Behavior):

Your test will call fetchUsers().

Expected Mocked API Response:

A network error with status code 404.

Expected Frontend Behavior (Error Handling):

Your test should assert that an error is thrown or a specific error state is managed by your frontend logic. For instance, a function might return null or throw an exception.

Explanation:

The test simulates a server-side issue (e.g., resource not found) by returning an error response. Your frontend code's error handling mechanism should be triggered and tested.

Constraints

• HTTP Client: Assume your frontend code uses a common HTTP client library like axios or the native fetch API. The solution should be adaptable to either.
• Jest Version: Use a recent stable version of Jest.
• TypeScript: All code, including tests, should be written in TypeScript.
• Mocking Library: Primarily use Jest's built-in mocking features (jest.mock, jest.spyOn). You may optionally explore libraries like jest-mock-extended for more advanced mocking patterns.
• No External Server: No actual backend server should be running or accessible during testing.

Notes

• This challenge is designed to test your understanding of how to isolate your frontend code from external dependencies using mocking.
• Consider using jest.fn() to create mock functions and mockResolvedValue() or mockRejectedValue() to control the behavior of these functions.
• Think about how to structure your tests to cover both successful API calls and error scenarios.
• The goal is not to build a complex mock server, but rather to effectively intercept and respond to specific API requests within your Jest tests.