How to Test React Apps with Cypress and Mock APIs

Last updated: October 15, 2026

If you've ever shipped a feature that worked perfectly in development but broke in production, you know the value of solid automated tests. Writing tests before or alongside your code catches bugs early and gives you confidence when refactoring. For React developers, Cypress has become a popular choice for end-to-end testing because it runs directly in the browser and handles async operations automatically.

Below is a practical walkthrough of how to configure Cypress to test a React application backed by a fake JSON server, all written in TypeScript. The setup uses free, open-source tools, so you don't need expensive infrastructure to get started.

The short version

• Cypress is a front-end testing framework described as the next generation of browser automation tools
• A fake JSON server lets you control API responses so tests always run against known data
• TypeScript adds static typing to catch type mismatches early in development
• The three components—React app, mock server, and Cypress—run on separate ports (3000, 5000, and a Cypress-managed port)
• You can proxy API requests through the React development server so your app naturally uses the mock backend

Why developers choose Cypress for React projects

Cypress differs from older tools like Selenium by operating inside the browser rather than driving a separate browser instance. This means it can access the application DOM directly, wait for elements to appear without manual timeouts, and capture screenshots or videos automatically when tests fail.

For React projects specifically, Cypress pairs well with component-based architecture because you can simulate user interactions—clicks, form submissions, navigation—and verify that the right state changes occur. The framework includes built-in debugging tools that let you step through a failing test and see exactly where the behavior diverged from expectations.

Adding TypeScript to this stack brings compile-time checking to your test code and mock data. If your API response shapes change, TypeScript will flag mismatches in your tests before you run them. This reduces the back-and-forth between writing a test, running it, and fixing type errors.

Setting up the three pieces

Start with the React application. The Create React App tool supports TypeScript out of the box when you pass the typescript template flag.

For the mock API, a lightweight JSON server package handles REST-style endpoints from a simple data file. Installing the TypeScript types alongside the package lets you define your response data with full type safety.

The server configuration defines module settings, targets an ES6 JavaScript version, and points the TypeScript compiler at your server files. Once running on port 5000, it serves the mock data as if it were a real backend.

When your React app calls /quotes, the development server proxies that request to the JSON server automatically if you add a proxy field to your package.json. This keeps your app code clean—you call the same endpoint whether you're using real or mock data.

For Cypress, install the core package along with TypeScript types and any supplementary libraries you prefer for selecting DOM elements. After installation, the cypress open command generates example tests and a configuration file.

Inside the Cypress config, you can ignore the built-in example tests and set your app's base URL so the framework knows where to load pages from. The typical folder structure keeps the React app source, mock server files, and Cypress tests in separate directories within the project root.

A concrete example

Say you have a React component that displays a list of quotes fetched from an API. Before connecting to a real backend, you want to verify the component handles empty responses, displays loading states, and renders the correct number of items.

With the mock server running, you define a test data file containing an empty array. You write a Cypress test that navigates to the quotes page, waits for the loading indicator to disappear, and asserts that no quote cards appear. Then you update the mock data to include two items and run the same test again, this time checking that exactly two elements with the quote card class exist on the page.

This approach isolates the component's behavior from the backend. You test the React layer independently, then swap in a real API later without rewriting your tests.

What to watch next

Once this basic setup is working, consider extending it with API model type definitions generated from your backend's Swagger specification. Tools exist to automatically create TypeScript interfaces matching your API contracts, keeping your mock data and tests synchronized as the backend evolves. You can also add Cypress tests to your continuous integration pipeline so every pull request validates the frontend behavior against the mock server before merging.

Bottom line

Combining Cypress, a JSON mock server, and TypeScript gives React developers a reliable testing environment where API behavior is predictable and type errors surface immediately. The setup is free, runs locally, and scales with your project as the number of tests grows.

Key takeaways

• Cypress provides fast, browser-based testing with automatic waiting and debugging tools
• A mock JSON server lets you test React components against controlled, repeatable API responses
• TypeScript catches type mismatches in tests and mock data at compile time, not runtime
• Proxying API requests through the React dev server keeps your application code unchanged between development and testing environments
• Start with simple assertions like element counts before adding complex test scenarios