Q193- How do you test React applications?

Testing in React ensures your components work as expected — both individually (unit tests) and as a whole (integration or end-to-end tests).

Let’s break it down 👇

---

🧪 1. Types of Testing in React

Type	Purpose	Example Tools
Unit Testing	Test individual components or functions	Jest + React Testing Library
Integration Testing	Test how multiple components work together	React Testing Library
End-to-End (E2E) Testing	Test the full user flow in a browser	Cypress, Playwright, Selenium
Snapshot Testing	Detect unexpected UI changes	Jest Snapshots

---

⚙️ 2. Unit Testing with Jest and React Testing Library (RTL)

React apps (created with CRA, Vite, or Next.js) usually come with Jest preconfigured.
You combine it with React Testing Library (RTL) for testing user behavior rather than implementation details.

🧩 Example

Component:

// Greeting.js
export default function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Test:

// Greeting.test.js
import { render, screen } from "@testing-library/react";
import Greeting from "./Greeting";

test("renders greeting with name", () => {
  render(<Greeting name="Dev" />);
  expect(screen.getByText("Hello, Dev!")).toBeInTheDocument();
});

Run tests:

npm test

✅ What happens:

• render() mounts the component virtually.
• screen.getByText() finds the element by text.
• The test passes if it exists in the DOM.

---

🧭 3. Testing user interactions

Use RTL’s fireEvent or userEvent to simulate user actions (clicks, typing, etc.)

import { render, screen, fireEvent } from "@testing-library/react";
import Counter from "./Counter";

test("increments counter on button click", () => {
  render(<Counter />);
  fireEvent.click(screen.getByText("Increment"));
  expect(screen.getByText("Count: 1")).toBeInTheDocument();
});

---

📸 4. Snapshot Testing

Snapshots store the rendered output of a component and compare future runs to detect UI changes.

import renderer from "react-test-renderer";
import Greeting from "./Greeting";

test("matches snapshot", () => {
  const tree = renderer.create(<Greeting name="Dev" />).toJSON();
  expect(tree).toMatchSnapshot();
});

If the output changes unintentionally, the test fails — alerting you to UI drift.

---

🌐 5. End-to-End (E2E) Testing

For testing the entire app in a real browser, tools like Cypress or Playwright are used.

Example with Cypress:

// cypress/e2e/login.cy.js
describe("Login flow", () => {
  it("logs in a user successfully", () => {
    cy.visit("/login");
    cy.get("input[name=username]").type("Dev");
    cy.get("input[name=password]").type("123456");
    cy.get("button[type=submit]").click();
    cy.url().should("include", "/dashboard");
  });
});

Run with:

npx cypress open

---

🧱 6. Common Testing Libraries

Purpose	Library
Test runner	Jest
DOM testing	React Testing Library
Mocking API calls	MSW (Mock Service Worker)
End-to-End UI	Cypress, Playwright
Type safety in tests	TypeScript + Jest

---

✅ Summary

Goal	Tool	Example
Test component output	Jest + RTL	expect(screen.getByText(...))
Simulate user actions	RTL’s userEvent	Clicks, typing
Test visual changes	Jest Snapshots	toMatchSnapshot()
Test full flow	Cypress	Visit pages, assert navigation

---

In short:

React apps are tested using Jest + React Testing Library for components and Cypress/Playwright for end-to-end scenarios — focusing on how users interact with your app, not just how it’s implemented.