Testing Library

Was ist Testing Library?

Testing Library prüft Komponenten so, wie echte Menschen sie tatsächlich bedienen, statt sich an internen Details festzuhalten. Du fragst Elemente über ihre Rolle, ihr Label oder ihren sichtbaren Text ab, nicht über CSS-Klassen oder Komponenten-Interna. Dadurch entstehen Tests, die das Verhalten einer Oberfläche absichern und bei Umbauten nur selten grundlos kaputtgehen. Als angenehmer Nebeneffekt drängt dich diese Denkweise zu zugänglicheren Komponenten, weil zugängliche UI auch gut testbare UI ist.

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

test("increments on click", async () => {
  render(<Counter />);
  await userEvent.click(screen.getByRole("button", { name: /add/i }));
  expect(screen.getByText("1")).toBeInTheDocument();
});