Getting Started with React Testing Library

Testing React components doesn’t have to be painful. React Testing Library (RTL) takes a different approach from older tools like Enzyme — instead of inspecting component internals, it tests the way a real user interacts with the UI.

The Core Principle

RTL’s guiding philosophy is:

The more your tests resemble the way your software is used, the more confidence they can give you.

This means you find elements by visible text, ARIA roles, and placeholders — not by class names or component state.

💡

Pair RTL with Vitest instead of Jest for Vite-based projects. It’s faster and requires zero extra config.

A Simple Example

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

it('submits the form with user input', () => {
  render(<ContactForm />);
  fireEvent.change(screen.getByPlaceholderText(/your name/i), {
    target: { value: 'Alice' },
  });
  fireEvent.click(screen.getByRole('button', { name: /send/i }));
  expect(screen.getByText(/message sent/i)).toBeInTheDocument();
});

Key Query Priority

getByRole — most accessible, mirrors how screen readers work
getByLabelText — great for form fields with labels
getByPlaceholderText — useful when no label exists
getByText — for non-interactive content
getByTestId — last resort only

Start with getByRole wherever possible and your tests will naturally encourage better accessibility in your components.