Testing React Components

Testing ensures your React application works as expected and helps prevent bugs as your codebase grows. The most common approach is component testing using Jest and React Testing Library (RTL).

Why Test React Components?

• Catch bugs early

• Improve code confidence

• Make refactoring safer

• Ensure UI behaves correctly

Common Testing Types in React

1. Unit Tests – Test individual components or functions

2. Integration Tests – Test component interactions

3. End-to-End (E2E) Tests – Test full user flows (e.g., Cypress, Playwright)

Recommended Tools

Jest

• JavaScript testing framework

• Test runner and assertion library

React Testing Library (RTL)

• Tests components from the user’s perspective

• Encourages best practices

Installation

npm install --save-dev @testing-library/react @testing-library/jest-dom

Jest is already included in most React setups (CRA, Vite).

Basic Test Structure

test("description", () => {
  // arrange
  // act
  // assert
});

Testing a Simple Component

Component

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default Greeting;

Test

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

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

Common Queries in RTL

• getByText – element must exist

• queryByText – element may not exist

• findByText – async elements

Example:

screen.getByRole("button");
screen.getByLabelText("Email");

Testing User Interactions

Use user-event for realistic interactions.

npm install --save-dev @testing-library/user-event

import userEvent from "@testing-library/user-event";

test("button click updates count", async () => {
  const user = userEvent.setup();
  render(<Counter />);

  await user.click(screen.getByText("Increment"));
  expect(screen.getByText("1")).toBeInTheDocument();
});

Testing State Changes

Focus on what the user sees, not implementation details.

❌ Don’t test state directly
✅ Test UI updates after actions

Testing Async Components

test("loads and displays data", async () => {
  render(<Users />);

  expect(await screen.findByText("John")).toBeInTheDocument();
});

Mocking Functions and APIs

Mock a Function

const mockFn = jest.fn();

Mock Fetch

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ name: "John" })
  })
);

Testing with Props

test("renders disabled button", () => {
  render(<Button disabled />);
  expect(screen.getByRole("button")).toBeDisabled();
});

What NOT to Test

• Internal state

• Implementation details

• Third-party library internals

Best Practices

• Test behavior, not implementation

• Use semantic queries (getByRole)

• Keep tests simple and readable

• Write tests as users interact with the app

Running Tests

npm test

Key Takeaways

• Jest + React Testing Library is the standard

• Focus on user behavior

• Mock external dependencies

• Tests improve reliability and confidence