Testing React Components with Jest and RTL

Thu, 15 Jul 2021 00:00:00 +0000

React Testing Library (RTL) encourages tests that resemble how users interact with your UI-queries by role, label, and text instead of implementation details.

A Simple Component Test

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

test('increments count on click', () => {
  render(<Counter />);
  fireEvent.click(screen.getByRole('button', { name: /increment/i }));
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});

What to Test

Focus on user-visible behavior: forms submit, errors display, loading states appear. Mock network with MSW (Mock Service Worker) instead of mocking fetch in every test.

Jest on David Lang

Testing React Components with Jest and RTL

A Simple Component Test

What to Test