Mock API Setup in React: A Complete Beginner’s Guide

Frontend applications often rely on APIs to fetch and display data. When the backend is unavailable or incomplete, a mock API can help developers continue building and testing the frontend independently.

A mock API simulates real API responses, allowing you to work with predictable data and conditions. This is especially useful in React projects, where components often depend on asynchronous data.

In this guide, you’ll learn how to use mock APIs in React, why they’re useful, and how to set them up using Requestly.

What Is a Mock API?

A mock API is a simulated version of a real API. It returns predefined responses to HTTP requests. These responses can be static or dynamic based on the request parameters.

API mocking is used during development when the real backend is unavailable, incomplete, or unstable. They allow developers to build and test frontend features without needing a working server.

Mock APIs can be created using tools that intercept requests or by running a lightweight server locally. They support methods like GET, POST, PUT, and DELETE, just like real APIs.

Why Are Mock APIs Important for Frontend Teams?

Mock APIs allow frontend teams to build and test in isolation, without depending on backend readiness. This speeds up development and improves reliability in different environments.

• Parallel development: Teams can start building UI components before the backend is complete to reduce idle time and accelerate feature delivery.
• Consistent testing: Mock responses return fixed data, which eliminates variability from unstable or changing APIs and allows repeatable tests across all environments.

• Error simulation: Developers can manually create 4xx or 5xx responses to test how the UI handles API failures, which is hard to do reliably with real backends.
• Faster prototyping: Designers and product managers can interact with working UI demos backed by mock data, which helps validate ideas before investing in backend work.
• Reduced blockers: If the backend breaks or changes unexpectedly, the frontend still functions against mocks, keeping development and QA on track without waiting for fixes.

Working with Mock Data in React

Using mock data effectively in React requires careful management of state, data structure, and behavior simulation. Proper handling ensures your app behaves realistically and scales well as it grows.

1. Managing State Across Components

React components often rely on asynchronous API data to render UI elements. When working with mock data:

• Centralize mock data state in a global store (e.g., Context API or Redux) to avoid duplication and ensure consistency across components.
• Use hooks like useEffect to simulate data fetching and update state as if you were calling a real API.
• Mock loading and error states explicitly by controlling the timing and outcome of your data fetch simulation to reflect realistic user experiences.

2. Structuring Mock Data for Larger Apps

As apps grow, unstructured mock data leads to maintenance headaches. Best practices include:

• Organize mock data in modular files grouped by feature or domain, mirroring your app’s data models.
• Use factories or generators to produce consistent mock objects with unique IDs and variable data for more dynamic testing.
• Keep mock schemas aligned with real API contracts to reduce surprises when switching to production data.

3. Simulating Real API Behavior

Real APIs don’t respond instantly or always succeed. To make your mock API more effective:

• Introduce artificial delays in mock responses to test loading spinners, timeouts, and retry logic.
• Simulate different HTTP status codes, such as 404 or 500, to verify error handling, UI, and fallback states.
• Randomize error occurrences or response times to mimic network instability and prepare your frontend for real-world scenarios.

Mock API Strategies for Testing and Scaling React Applications

Mock APIs allow teams to work independently of backend services, ensure reliable testing, and support scalable frontend architecture. This section covers two core areas: how to test React components using mock APIs, and how to scale mock API configurations as your application grows.

Testing React Components Using Mock APIs

React components often rely on asynchronous data from APIs. Without controlled data inputs, testing them can lead to flaky results, missed edge cases, or slow feedback loops. Mock APIs solve this by creating a stable, isolated environment for verifying component behavior.

• Comprehensive state testing: Simulate success, failure, empty results, and partial responses to validate how each component handles and displays different states using useState, useEffect, or data-fetching hooks.
• Simulating asynchronous behavior: Add delay or failure to mock responses to test loading states, conditional rendering, fallback UIs, and error boundaries within React.
• Isolated unit tests and integration tests: Use mocks to focus on component logic rather than external dependencies. This keeps test cases stable and performance fast, especially when using tools like React Testing Library or Jest.

• Automated test consistency: Mock APIs ensure repeatable tests in CI environments by removing backend variability and external dependencies.
• Edge case coverage: Inject rare or difficult-to-reproduce backend scenarios like invalid auth tokens, pagination limits, or malformed payloads to confirm how components recover or adapt.

Advanced Mock API Setup for React Applications

In larger projects, simple mock setups no longer suffice. As features increase, mocking must evolve to mirror the complexity of real data flows, support collaboration, and remain maintainable.

• Environment-based mocking: Configure mocks that activate based on React’s runtime environment (e.g., using process.env.NODE_ENV) so developers and CI can use mock data while staging or production hits real APIs.
• Dynamic mock responses: Return different mock data based on query parameters, headers, or request bodies to test how components behave with filters, search, pagination, and conditional logic.
• Version control and collaboration: Store mock data in your project’s repository, organized by feature or endpoint. This ensures consistency across team members and makes mocks easy to update as APIs change.
• Session recording and playback: Capture actual API interactions from the running app to auto-generate accurate mock responses. This reduces manual mocking errors and reflects real user flows.
• Scaling mock data: Use data factories or generators to create varied, realistic mock datasets. Structure your mocks by domain (e.g., /mocks/users.js, /mocks/orders.js) to mirror backend models and keep mock logic maintainable.

Example: Testing a React Component with a Mocked API

Suppose you have a UserList component that fetches and displays users from /api/users:

// UserList.jsx

import { useEffect, useState } from "react";




export default function UserList() {

  const [users, setUsers] = useState([]);

  const [loading, setLoading] = useState(true);

  const [error, setError] = useState(null);




  useEffect(() => {

    fetch("/api/users")

      .then((res) => {

        if (!res.ok) throw new Error("Failed to fetch");

        return res.json();

      })

      .then((data) => setUsers(data))

      .catch((err) => setError(err.message))

      .finally(() => setLoading(false));

  }, []);




  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error: {error}</p>;




  return (

    <ul>

      {users.map((user) => (

        <li key={user.id}>{user.name}</li>

      ))}

    </ul>

  );

}

This component uses fetch inside a useEffect to load data when it mounts. It handles three states: loading, error, and success.

To test this component using a mock API, you can mock the fetch function in a test file:

// UserList.test.jsx

import { render, screen, waitFor } from "@testing-library/react";

import UserList from "./UserList";




// Mocking fetch globally

beforeEach(() => {

  global.fetch = jest.fn(() =>

    Promise.resolve({

      ok: true,

      json: () =>

        Promise.resolve([

          { id: 1, name: "Alice" },

          { id: 2, name: "Bob" },

        ]),

    })

  );

});




afterEach(() => {

  jest.resetAllMocks();

});




test("renders user list after fetch", async () => {

  render(<UserList />);




  expect(screen.getByText("Loading...")).toBeInTheDocument();




  await waitFor(() => {

    expect(screen.getByText("Alice")).toBeInTheDocument();

    expect(screen.getByText("Bob")).toBeInTheDocument();

  });

});

This test does the following:

• Mocks fetch to return a hardcoded list of users
• Renders the component and checks for the loading state
• Waits for the mock data to be loaded
• Asserts that the correct names are rendered

This structure allows you to simulate different scenarios without relying on a real backend. You can change the mocked response to return an error, an empty list, or a delayed result to test how the component responds.

Why Use Requestly for Mock APIs in React?

Requestly by BrowserStack is a powerful tool for mocking APIs directly from the browser or desktop without changing your application code. It intercepts network requests and lets you define custom responses for REST and GraphQL APIs.

Key reasons to use Requestly with React:

• No code changes required: Create mock responses for real endpoints without modifying your fetch or Axios calls, so you can start mocking instantly without rewriting existing code.
• Control over response behavior: Customize status codes, headers, body content, and simulate network delays or errors to test how your React app handles different scenarios and edge cases.
• GraphQL support: Mock specific queries or mutations using operation-name filters to precisely target parts of your GraphQL API and avoid unnecessary mocks.
• Session recording: Capture real API traffic and convert it into reusable mock rules to quickly generate accurate mocks based on actual backend responses.
• Collaborative workflow: Share mock API setups with your team using Shared Collections to ensure everyone works with consistent mocks and reduce integration issues.
• Runs in browser or desktop: Choose between the Browser Extension or the Desktop App depending on your workflow.

Mock API Setup in React Using Requestly

You can mock an API in your React app using Requestly’s Modify & Mock API Responses feature. This lets you intercept HTTP requests and return custom responses, fully managed in the browser or desktop environment.

Follow these steps to create a basic mock rule using Requestly:

1. Open the Requestly dashboard using the browser extension or desktop app.
2. Create a “Modify API Response” rule under the HTTP Rules section.
3. Set the URL match condition to target an endpoint your React app calls (e.g., /api/products).
4. Define the mock response: Choose a status code (like 200), and provide a JSON body that your app expects.
5. Enable “Serve response locally” to bypass the network request and use your mock directly.
6. Save and activate the rule: Reload your React app and confirm the mock response is being used.

For faster setup, you can record actual network traffic with the Session Recorder and auto-generate multiple mock rules. Once active, your React components will receive mock data seamlessly as if from a real server.

Talk to an Expert

Common Pitfalls When Setting Up and Using Mock APIs in React

Mocking can speed up development and testing, but if not handled carefully, it creates hidden problems that surface later in staging or production. Here are some real pitfalls teams run into:

• Mocks drifting from backend contracts: Over time, mock responses diverge from the real API, especially when backend changes aren’t tracked. This leads to false confidence during testing and runtime failures when the real API behaves differently.
• Hardcoded assumptions baked into UI logic: Developers may unknowingly tailor components to the shape or content of mock data, skipping edge cases, invalid values, or incomplete payloads that occur in production.
• Mock responses lacking variability: Static mocks return the same response every time, which means pagination, filtering, and dynamic states aren’t properly tested. This weakens test coverage for real user behavior.
• Test environments not aligned with mock behavior: Developers might test against a mock that always succeeds, while the staging API returns intermittent errors or slower responses. This causes untested failure paths in deployed code.
• Environment switching overlooked or misconfigured: Without a reliable mechanism to switch between mock and real APIs, developers might accidentally push code that references mock endpoints or behaves differently across environments.
• Mock logic embedded in components or test files: When mocking is done inline or per-test, it becomes difficult to manage, reuse, or update across the codebase. This leads to inconsistent behavior and unnecessary duplication.
• Overusing mocks during integration testing: Mocks are useful for unit tests, but relying on them exclusively means you’re not validating actual integration between the frontend and backend. This increases the risk of integration bugs slipping into production.

Best Practices for Mock API Setup in React

To avoid these pitfalls, here are practices rooted in real project experience that help keep mocking clean, reliable, and scalable:

• Mirror backend data models in mock files: Structure your mock responses to match actual API contracts and response shapes. Keep them updated as part of your CI or review process whenever backend APIs change.
• Use shared mock layers, not inline logic: Centralize mock setup logic outside individual tests or components. This ensures consistent behavior and easier updates across the app.
• Add variance to mock data intentionally: Simulate different types of responses, such as valid, empty, partial, or malformed, and include edge cases like null values or missing fields to test robustness.
• Separate mock config by environment: Control whether mocks are active based on build environment (development, test, production). Avoid toggling mocks manually in code or relying on fragile workarounds.
• Use session-captured data for accuracy: When possible, generate mock data based on actual backend responses. This helps reduce the gap between what you test and what runs in production.
• Validate mocks through integration runs: Don’t rely solely on mocked unit tests. Run regular integration tests against staging APIs to verify that the frontend and backend are truly aligned.
• Document mock assumptions clearly: Especially in shared teams, document what each mock represents, when it was last updated, and which API version it matches. This prevents misuse and confusion over what the mock data actually reflects.

Conclusion

Mock API setup in React allows frontend teams to work in parallel with backend development, simulate unstable or delayed services, and test components in isolation. When structured properly, mocks reduce friction in local development, prevent unnecessary backend blockers, and expose edge cases before they reach production.

Requestly helps teams test React apps against realistic mock conditions without modifying application code. You can intercept live API calls, simulate failures or delays, and recreate complete sessions for regression testing.

Try Requestly for Free