Testing React Components with React Testing Library

Automated tests give confidence that a component behaves correctly and keeps behaving correctly as the code changes. React Testing Library (RTL) is the standard tool for testing React components, and it is built around a specific philosophy: tests should interact with components the way a real user would — finding elements by visible text, labels, or roles, and clicking or typing — rather than reaching into component internals like state or instance methods.

RTL is typically paired with a test runner such as Jest or Vitest, which provides describe, it/test, and assertion functions, while RTL itself provides the rendering and querying utilities.

Why it matters

A user interface has many states, and checking them all by hand after every change does not scale. React Testing Library tests a component the way a user meets it: by what is on screen and what happens on a click. Tests written this way survive refactoring and give real confidence that the feature works.

render and screen

render(<Component />) mounts a component into a virtual DOM for testing. After rendering, you query the result using the screen object, which exposes methods like getByText, getByRole, and getByLabelText to find elements the same way a user would identify them visually — by their text or accessible role — rather than by CSS class names or internal implementation details.

Simulating User Interaction with fireEvent

fireEvent dispatches DOM events such as clicks, changes, and form submissions on elements found via screen. A typical pattern is: render the component, find an element, fire an event on it (like a click), then assert that the UI updated as expected using expect(...) matchers such as toBeInTheDocument() or toHaveTextContent(). The newer userEvent library models real user interaction even more closely (including focus and keyboard events) and is often preferred over fireEvent for new tests, but fireEvent remains the foundational, directly-included tool.

Testing Philosophy: Behavior, Not Implementation

RTL deliberately makes it awkward to test internal state or call component methods directly, because doing so couples tests to implementation details that can change without changing user-visible behavior. A well-written RTL test would rather assert "the text 'Item added' appears after clicking Add" than "the internal itemCount state equals 1" — the former still passes after a refactor that changes how state is stored internally, as long as the visible behavior is unchanged.

Examples

// Counter.jsx
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}

// Counter.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Counter from './Counter';

test('increments the count when the button is clicked', () => {
  render(<Counter />);

  expect(screen.getByText('Count: 0')).toBeInTheDocument();

  const button = screen.getByRole('button', { name: /increment/i });
  fireEvent.click(button);

  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Running the test suite (e.g. "npm test") reports this test as passing: the component initially shows "Count: 0", and after simulating a click on the Increment button, the text "Count: 1" is found in the rendered output.

// LoginForm.jsx
import { useState } from 'react';

export default function LoginForm({ onSubmit }) {
  const [username, setUsername] = useState('');

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(username);
      }}
    >
      <label htmlFor="username">Username</label>
      <input
        id="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit">Log In</button>
    </form>
  );
}

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

test('calls onSubmit with the typed username', () => {
  const handleSubmit = jest.fn();
  render(<LoginForm onSubmit={handleSubmit} />);

  const input = screen.getByLabelText('Username');
  fireEvent.change(input, { target: { value: 'ash123' } });
  fireEvent.click(screen.getByRole('button', { name: /log in/i }));

  expect(handleSubmit).toHaveBeenCalledWith('ash123');
});

The test passes: getByLabelText finds the input via its associated <label>, fireEvent.change simulates typing "ash123", and clicking "Log In" triggers the form submit handler, which calls the mocked onSubmit function with "ash123" as expected.

Exercise

Do this in a Vite + React project with Vitest and React Testing Library installed (npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom, with the test environment set to jsdom). Given the Counter component in the starter, write a test file src/Counter.test.jsx with one test that renders the counter, checks that it shows "Count: 0", clicks the button, and checks that it now shows "Count: 1".

Expected result: running the tests reports one passing test.

// src/Counter.jsx
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Add one</button>
    </div>
  );
}

// src/Counter.test.jsx
// TODO: import render, screen and fireEvent, and the Counter
// TODO: one test: render, assert "Count: 0", click the button, assert "Count: 1"

// src/Counter.jsx
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Add one</button>
    </div>
  );
}

// src/Counter.test.jsx
import { expect, test } from "vitest";
import { fireEvent, render, screen } from "@testing-library/react";
import Counter from "./Counter";

test("adds one when the button is clicked", () => {
  render(<Counter />);

  expect(screen.getByText("Count: 0")).toBeTruthy();

  fireEvent.click(screen.getByRole("button", { name: "Add one" }));

  expect(screen.getByText("Count: 1")).toBeTruthy();
});

Quick quiz

Interview questions