Component Tests with Vitest and Testing Library

Vitest (Vite-native, Jest-compatible API) plus React Testing Library is the standard setup. Render components, find elements by role, label or text (getByRole('button', { name: /save/i })), simulate interactions with @testing-library/user-event, and assert on what users see. Avoid testing implementation details such as internal state or CSS classes.

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { Newsletter } from "./Newsletter";

describe("Newsletter", () => {
  it("shows a validation error for invalid emails", async () => {
    const user = userEvent.setup();
    render(<Newsletter />);

    await user.type(screen.getByRole("textbox", { name: /email/i }), "not-an-email");
    await user.click(screen.getByRole("button", { name: /subscribe/i }));

    expect(await screen.findByRole("alert")).toHaveTextContent("Enter a valid email");
  });

  it("calls onDone after success", async () => {
    const onDone = vi.fn();
    // ...
  });
});

Common pitfalls

• Querying by test IDs or class names when a role or label exists.
• Using fireEvent instead of user-event for realistic interactions.
• Asserting on snapshots of large component trees.

Key points

• Query by role and label
• user-event for interactions
• Assert on visible behavior

Further reading: React Testing Library