Tutorials › React Modern Development › React Testing Library

React Testing Library

6 min read Quiz at the end

React Testing Library tests from the user's perspective. Use screen.getByRole(), screen.getByLabelText(), and userEvent to interact with the UI. Test what users see and do, not internal component state.

Testing with React Testing Library

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

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

test("counter increments", () => {
  render();

  const btn = screen.getByText("+");
  const count = screen.getByText("Count: 0");

  fireEvent.click(btn);
  expect(screen.getByText("Count: 1")).toBeInTheDocument();
});

← React Hook Form Next: Next.js Intro →

Topic Quiz · 5 questions

Test your understanding before moving on

1. What does RTL encourage testing?

💡 RTL encourages testing what the user sees and does, not implementation details.

2. Which function renders a component in tests?

💡 render(<Component />) from RTL renders into a test DOM.

3. How do you find an element by text?

💡 screen.getByText('text') finds an element by its visible text content.

4. What does fireEvent.click() do?

💡 fireEvent.click(element) simulates a user click on the element.

5. What is the user-event library for?

💡 @testing-library/user-event simulates real browser events (typing, clicking) more accurately than fireEvent.

Quick Access

React Testing Library

Testing with React Testing Library

Test your understanding before moving on