React End-to-End Testing

End-to-End (E2E) testing ensures that your entire application works correctly from the user's perspective. Unlike unit tests, which test individual components, E2E tests simulate real user interactions, like clicking buttons, filling forms, and navigating pages.

Why E2E Testing is Important

Validates real user flows – Ensures login, signup, and navigation work as expected
Catches integration issues – Detects bugs missed by unit tests
Automates regression testing – Saves time when deploying updates

1. Setting Up Cypress for React

Cypress is a popular E2E testing framework for modern web applications.

Installation

npm install cypress --save-dev

Open Cypress

npx cypress open

Opens Cypress Test Runner
You can create spec files under cypress/e2e

Basic Cypress Test

Suppose you have a simple React app with a login form:

// Login.jsx
import React, { useState } from "react";

function Login() {
  const [username, setUsername] = useState("");
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <div>
      {loggedIn ? (
        <h2>Welcome, {username}</h2>
      ) : (
        <>
          <inputtype="text"
            placeholder="Username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
          <button onClick={() => setLoggedIn(true)}>Login</button>
        </>
      )}
    </div>
  );
}

export default Login;

Cypress Test Example:

// login.cy.js
describe("Login Form", () => {
  it("logs in a user", () => {
    cy.visit("<http://localhost:3000>"); // React app URL

    cy.get("input[placeholder='Username']").type("Alice");
    cy.get("button").contains("Login").click();

    cy.contains("Welcome, Alice").should("be.visible");
  });
});

cy.visit() opens the app in the browser
cy.get() selects DOM elements
cy.contains() checks that text is visible
Simulates real user interaction

2. Playwright for React E2E Testing

Playwright is another modern E2E testing tool that supports multi-browser testing.

Installation

npm install -D @playwright/test
npx playwright install

Basic Playwright Test

// login.spec.js
const { test, expect } = require("@playwright/test");

test("user can log in", async ({ page }) => {
  await page.goto("<http://localhost:3000>");

  await page.fill("input[placeholder='Username']", "Alice");
  await page.click("text=Login");

  await expect(page.locator("h2")).toHaveText("Welcome, Alice");
});

page.goto() navigates to your app
page.fill() and page.click() simulate user actions
expect().toHaveText() asserts that the login worked

Key Differences: Cypress vs Playwright

Feature	Cypress	Playwright
Browser support	Chrome, Edge, Firefox (experimental)	Chrome, Firefox, WebKit (Safari)
Parallel tests	Limited	Advanced
Network interception	Easy	Easy
Test speed	Fast	Faster
Debugging	Interactive UI	Code-driven

React Handbook

React Handbook