Testing React components — React (with Hooks, React 19 & Next.js basics)

17. Testing React components

IntermediateMediumLesson 17 of 17

jsx

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

test("shows an error for an invalid email", async () => {
  render(<LoginForm onLogin={vi.fn()} />);
  await userEvent.type(screen.getByRole("textbox"), "not-an-email");
  await userEvent.click(screen.getByRole("button", { name: /login/i }));
  expect(screen.getByRole("alert")).toHaveTextContent("Enter a valid email");
});

React Testing Library philosophy: test behaviour as a user sees it (roles, labels, text), not implementation details (state, internal methods). Mock network calls with MSW (Mock Service Worker). E2E with Playwright.