To ensure that your React components work as intended, you need to verify that they render the expected content based on the props and state you provide. Using React Testing Library, you can render a component in a test and then assert that certain text or elements appear in the document. For example, if you have a Greeting component that displays a message, you can write a test to check that the message is rendered when the component receives a specific prop.

Here is how you might write such a test:

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

test("renders the greeting message", () => {
  render(<Greeting message="Hello, user!" />);

  expect(screen.getByText("Hello, user!")).toBeInTheDocument();
});

In this test, you use the render function from React Testing Library to render the Greeting component with a message prop. Then, you use screen.getByText to find the element displaying the greeting message. Finally, you assert that this element is present in the document.

When writing tests with React Testing Library, it's important to query elements in a way that reflects how users interact with your application. The library provides several query methods, such as getByText, getByRole, and others. Using queries like getByText allows you to find elements by their visible text, which matches how users perceive your UI. Similarly, getByRole helps you find elements by their accessible roles, like buttons or headings.

You should avoid querying elements by implementation details, such as class names or internal IDs, because these can change as your code evolves and do not represent how users interact with your app. Instead, prefer queries that are resilient to changes in the underlying implementation and focus on the user's experience. This approach leads to more reliable and maintainable tests.