User-centred component tests that check real behaviour.
Testing Library checks components the way real people actually use them, rather than clinging to internal details. You query elements by their role, label or visible text, not by CSS classes or component internals. That produces tests which secure how an interface behaves and rarely break for no reason during refactors. As a pleasant side effect this mindset nudges you toward more accessible components, because accessible UI is also testable UI.
More in the documentationWe use Testing Library for everything in the frontend that has behaviour: forms, modals, lists with states. Instead of pinning down implementation details we test what the user sees and triggers, so you can restructure your markup freely without rewriting tests every time. It is the glue between our unit tests and the larger browser tests.
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();
});Good to know
Stick to the query priority list: getByRole before getByLabelText before getByText, with testId only as a last resort. For anything after a click you need findBy or waitFor, because React updates are async and getBy would otherwise fail too early.
More tools we work with in the same area.
Jest & Vitest
Fast unit and integration tests for dependable code.
Playwright
End-to-end tests that secure real user flows in the browser.
Cypress
Convenient E2E testing with excellent debugging.
Sentry
Realtime error tracking and performance monitoring in production.
ESLint & Prettier
Automatic code quality and consistent formatting.
You don't have to decide that, it's our job. Tell us about your plans.