Component Testing With Testing Library

Unit tests verify that functions return the right values. Component tests verify that users see the right things and can interact with them. Testing Library bridges this gap by encouraging you to test components the way users use them — through the rendered DOM, not internal state.

The core philosophy: if a user can't see it or interact with it, your test shouldn't either.

Setup

If you followed the Vitest setup from the previous lesson, you already have the dependencies. Make sure your vitest.setup.ts includes:

// vitest.setup.ts
import "@testing-library/jest-dom/vitest";

This adds custom matchers like toBeVisible(), toBeDisabled(), and toHaveTextContent().

Rendering Components

import { render, screen } from "@testing-library/react";
 
test("render