React E2E Testing with Cypress – Full App Workflow Testing (2025 Guide)

Introduction – What is E2E Testing with Cypress?

End-to-End (E2E) testing simulates real user interactions by running tests in a browser environment, validating your app’s complete workflow—UI, routing, APIs, and state.

Cypress is one of the most popular frameworks for E2E testing in React.js:

• Fast, reliable, browser-based tests
• Built-in screenshots and video recording
• Real DOM and network stubbing
• Great for CI/CD pipelines

In this guide, you’ll learn:

• How to install and configure Cypress
• Write tests for routing, forms, and API flows
• Mock APIs and UI states
• Best practices for scalable E2E test suites

1. Installing and Running Cypress

Install Cypress:

npm install --save-dev cypress

Add to Scripts:

"scripts": {
  "cypress:open": "cypress open",
  "cypress:run": "cypress run"
}

Launch Cypress UI:

npm run cypress:open

Opens the visual Cypress test runner in your browser.

2. Cypress Project Structure

cypress/
├── e2e/
│   └── home.cy.js       # E2E test files
├── fixtures/            # Test data (JSON, mocks)
├── support/             # Global config/hooks
cypress.config.js        # Cypress configuration

All test files go in cypress/e2e/*.cy.js

3. First Cypress Test – Visit & Assert

// cypress/e2e/home.cy.js
describe('Home Page', () => {
  it('loads and displays welcome text', () => {
    cy.visit('/');
    cy.contains('Welcome to React App');
  });
});

Cypress opens a real browser and checks for UI elements
Assertions based on real DOM (like a real user)

4. Test Forms & Inputs

describe('Login Form', () => {
  it('submits with valid credentials', () => {
    cy.visit('/login');
    cy.get('input[name=email]').type('user@example.com');
    cy.get('input[name=password]').type('password123');
    cy.get('button[type=submit]').click();
    cy.contains('Dashboard');
  });
});

Use cy.get(), cy.contains(), cy.type(), cy.click()
Simulates a real user typing and submitting a form

5. Mock API Responses with Intercepts

cy.intercept('GET', '/api/posts', {
  statusCode: 200,
  body: [{ id: 1, title: 'Mock Post' }]
}).as('getPosts');

cy.visit('/posts');
cy.wait('@getPosts');
cy.contains('Mock Post');

Stubs backend APIs
Speeds up tests and avoids dependency on real servers

6. Routing & Navigation

cy.visit('/');
cy.get('a[href="/about"]').click();
cy.url().should('include', '/about');
cy.contains('About Page');

Tests your SPA navigation just like a user
Use assertions on url, pathname, or location

7. Custom Commands & Reusability

// cypress/support/commands.js
Cypress.Commands.add('login', () => {
  cy.visit('/login');
  cy.get('input[name=email]').type('admin@site.com');
  cy.get('input[name=password]').type('admin123');
  cy.get('button[type=submit]').click();
});

Call with cy.login() in any test
DRY test code with custom commands

8. CI/CD Integration

GitHub Actions Example:

- name: Run Cypress Tests
  run: npm run cypress:run

Supports Jenkins, GitLab, CircleCI, Netlify, Vercel

9. Cypress Best Practices

Summary – Recap & Next Steps

Cypress gives you a production-like browser environment for E2E testing React apps. From login forms to navigation to API mocking—it ensures your UI workflows work just like your users expect.

Key Takeaways:

• Cypress runs fast, real-browser tests
• Use cy.visit(), cy.get(), cy.contains() to simulate users
• Use cy.intercept() to mock APIs
• Create reusable commands for DRY test suites
• Integrate with CI/CD for automated release checks

Real-World Relevance:
Cypress is used in apps like Slack, Netflix, Shopify, and Vercel to ensure end-to-end workflows like checkout, dashboard, and onboarding never break in production.

FAQ Section

Is Cypress only for E2E testing?
Mostly, but it can also be used for component testing with frameworks like Vite or Next.js.

Can Cypress test React state or props?
No. Cypress tests from the user perspective—not internal state. Use unit tests for that.

Can Cypress test mobile views?
Yes. Use cy.viewport() to simulate different screen sizes.

How do I debug failing tests in Cypress?
Cypress UI shows the browser DOM snapshot on failure. Use .debug() or .pause() for live debugging.

Can I use Cypress with React Router or Redux?
Yes. You can test any framework or state manager, as long as it renders in the browser.