React Testing Library is a popular library for testing React components, designed around the idea of testing your applications the way users actually interact with them. Unlike traditional testing utilities that focus on the internal implementation details of components, React Testing Library encourages you to write tests that focus on what your components render and how users experience them. Its main goals are to promote confidence in your UI by simulating real user behavior, reduce reliance on fragile implementation details, and improve test readability and maintainability. This approach stands in contrast to other testing libraries that often encourage selecting elements based on class names or component instances, which can lead to brittle tests that break with refactoring even when user-facing behavior remains unchanged.

React Testing Library's core principles include:

• Encouraging tests that resemble how users use your app;
• Avoiding tests that rely on internal component structure or implementation details;
• Providing utilities for rendering components and querying the DOM in ways that mimic user interactions;
• Making tests more resilient to refactoring and less coupled to component structure.

One of the central utilities in React Testing Library is the render function, which allows you to render a React component into a simulated DOM for testing. After rendering, you can query elements in the rendered output using methods that reflect how users find elements on the page. The most common queries are:

• By text: finding elements that display specific text content, such as getByText("Submit");
• By role: selecting elements by their ARIA role, like getByRole("button");
• By label: targeting form controls using their associated label text, for example getByLabelText("Username").

These queries help ensure your tests are focused on what users actually see and interact with, rather than how the component is implemented behind the scenes.

src/Greeting.jsx

export default function Greeting() {
  return (
    <div>
      <h1>Hello, user!</h1>
      <button>Submit</button>
    </div>
  );
}

src/Greeting.test.jsx

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

test("renders greeting message and submit button", () => {
  render(<Greeting />);

  // Query by visible text
  expect(screen.getByText("Hello, user!")).toBeInTheDocument();

  // Query by accessible role
  expect(
    screen.getByRole("button", { name: "Submit" })
  ).toBeInTheDocument();
});