What is the philosophy of React Testing Library (RTL), and how does it differ from the old Enzyme tests?

Short answer

RTL tests components as real users interact with them (using text, buttons, and accessibility roles), instead of testing internal implementation details such as State and Class Methods.

Explanation

Libraries such as Enzyme inspected internal component state (for example, wrapper.state().count) and isolated child components (Shallow Rendering). These tests easily break after a Refactor even when the UI still works for the user. RTL queries by visible roles and text (getByRole, getByText), creating more reliable and durable tests.

Code example

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

test('Increment the counter when the button is clicked', async () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: /Increment/i });
  await userEvent.click(button);
  expect(screen.getByText(/Count: 1/i)).toBeInTheDocument();
});

Common mistakes

• Extracting and calling internal state functions or checking props instead of testing what the user sees in the DOM.

Follow-up questions

• How do you test a Custom Hook separately with RTL's renderHook?
• How do getBy, queryBy, and findBy queries differ in React Testing Library?

Sources

• Testing Library docs — React Testing Library: Introduction