Testes de componentes com React Testing Library — Routing, testes e padrões

Testar como o usuário

A React Testing Library (RTL) é a ferramenta de referência para testar componentes. Sua filosofia é explícita:

Quanto mais seus testes se parecerem com a forma como seu software é usado, mais confiança eles te darão.

Por isso a RTL te incentiva a interagir com o componente como uma pessoa faria (procurando textos, labels e roles) e não a inspecionar detalhes internos como o estado ou os nomes dos métodos.

Esta lição é conceitual: o runtime dos exercícios não inclui a RTL. Aqui você aprende a filosofia e a API; a revisão é feita com quizzes.

O fluxo básico: render, screen, eventos

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Contador from "./Contador";

test("incrementa ao clicar no botão", async () => {
  render(<Contador />);

  // Buscar como o usuário: pelo que se vê.
  expect(screen.getByText("Contagem: 0")).toBeInTheDocument();

  // Interagir como o usuário: clicar no botão.
  await userEvent.click(screen.getByRole("button", { name: "Somar" }));

  expect(screen.getByText("Contagem: 1")).toBeInTheDocument();
});

render monta o componente em um DOM de teste.
screen oferece as consultas. Preferem-se as que buscam pelo que o usuário percebe:
- getByRole (o recomendado): busca pelo role de acessibilidade (button, heading, textbox...), opcionalmente com seu nome acessível.
- getByText, getByLabelText: pelo texto visível ou pela label de um campo.
fireEvent dispara eventos do DOM de baixo nível. userEvent (de @testing-library/user-event) é uma camada superior que simula interações mais realistas (digitar caractere a caractere, foco, hover) e costuma ser a opção preferida.

Comportamento, não implementação

A ideia de fundo: se você renomear uma variável de estado ou trocar useState por useReducer, o teste não deveria quebrar enquanto a interface se comportar igual. Você está testando comportamento observável, não detalhes de implementação. Isso faz com que os testes sobrevivam às refatorações.

Quem executa os testes?

A RTL só oferece os utilitários para renderizar e consultar; precisa de um executor de testes (test runner) que os rode. Os dois mais comuns são o Vitest (rápido, integrado com o Vite) e o Jest (o clássico). Ambos fornecem test/it, expect e os matchers como toBe ou toEqual.