Testing Library

ELI5 — The Vibe Check

Testing Library is a set of utilities that helps you test your UI the way a user would — by finding elements by their text or label, not by CSS class or ID. The motto: 'The more your tests resemble the way your software is used, the more confidence they give you.'

Real Talk

Testing Library (@testing-library) is a family of packages (React Testing Library, Vue Testing Library, etc.) that provides utilities for testing UI components in a user-centric way. It encourages querying the DOM by role, label, and text rather than implementation details.

Show Me The Code

import { render, screen, fireEvent } from '@testing-library/react';
import LoginForm from './LoginForm';

test('submits with email and password', async () => {
  render(<LoginForm onSubmit={jest.fn()} />);
  await userEvent.type(screen.getByLabelText('Email'), 'test@test.com');
  await userEvent.type(screen.getByLabelText('Password'), 'secret');
  await userEvent.click(screen.getByRole('button', { name: 'Log in' }));
});

When You'll Hear This

"Use getByRole instead of getByTestId — Testing Library's philosophy." / "React Testing Library is the standard for testing React components."