Testing React with Vitest & Testing Library

// ❌ Implementation-detail test: breaks when you rename state,
// switch useState → useReducer, or extract a child component
expect(component.state.isOpen).toBe(true);
expect(setStateSpy).toHaveBeenCalledTimes(2);

// ✅ Behavior test: survives ANY refactor that keeps the UX the same
await user.click(screen.getByRole("button", { name: /open menu/i }));
expect(screen.getByRole("menu")).toBeInTheDocument();

npm install -D vitest jsdom @vitejs/plugin-react \
  @testing-library/react @testing-library/jest-dom @testing-library/user-event

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    // Components need a DOM — jsdom fakes one inside Node
    environment: "jsdom",
    // Auto-import describe/it/expect in every test file
    globals: true,
    // Runs once before each test file (matchers + cleanup live here)
    setupFiles: "./src/test/setup.ts",
    css: true,
  },
});

// Registers matchers like toBeInTheDocument() on Vitest's expect
import "@testing-library/jest-dom/vitest";
import { cleanup } from "@testing-library/react";
import { afterEach } from "vitest";

// Unmount rendered components after every test so tests never leak
// DOM into each other
afterEach(() => {
  cleanup();
});

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "test:coverage": "vitest run --coverage"
  }
}

type GreetingProps = {
  name: string;
};

export function Greeting({ name }: GreetingProps) {
  return <h1>Hello, {name}!</h1>;
}

import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { Greeting } from "./Greeting";

describe("Greeting", () => {
  it("greets the user by name", () => {
    // 1. Arrange: mount the component into the fake DOM
    render(<Greeting name="Thirdy" />);

    // 2. Assert: find it the way a user would — by visible text
    expect(screen.getByText("Hello, Thirdy!")).toBeInTheDocument();
  });
});

✓ src/components/Greeting.test.tsx (1 test) 24ms
  ✓ Greeting > greets the user by name

Test Files  1 passed (1)
     Tests  1 passed (1)

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

describe("TodoItem", () => {
  it("calls onDelete with the todo id", async () => {
    const user = userEvent.setup();
    const handleDelete = vi.fn(); // a spy: records every call it receives

    render(
      <TodoItem
        todo={{ id: "t-42", title: "Ship the tests" }}
        onDelete={handleDelete}
      />
    );

    await user.click(screen.getByRole("button", { name: /delete/i }));

    expect(handleDelete).toHaveBeenCalledTimes(1);
    expect(handleDelete).toHaveBeenCalledWith("t-42");
  });
});

import { render, screen } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { OrderList } from "./OrderList";
import { fetchOrders } from "./api/orders";

// Hoisted to the top of the file — every import of ./api/orders
// now receives auto-mocked (vi.fn) exports instead of the real ones
vi.mock("./api/orders");

describe("OrderList", () => {
  it("renders the orders returned by the API", async () => {
    // Program the mock's response for THIS test
    vi.mocked(fetchOrders).mockResolvedValue([
      { id: "o-1", item: "Mechanical keyboard", total: 4500 },
      { id: "o-2", item: "USB-C hub", total: 1200 },
    ]);

    render(<OrderList />);

    expect(await screen.findByText("Mechanical keyboard")).toBeInTheDocument();
    expect(screen.getByText("USB-C hub")).toBeInTheDocument();
    expect(fetchOrders).toHaveBeenCalledTimes(1);
  });

  it("shows an error state when the API fails", async () => {
    vi.mocked(fetchOrders).mockRejectedValue(new Error("Network down"));

    render(<OrderList />);

    expect(
      await screen.findByText(/could not load orders/i)
    ).toBeInTheDocument();
  });
});

import { vi, beforeEach, afterEach } from "vitest";

beforeEach(() => {
  vi.stubGlobal(
    "fetch",
    vi.fn().mockResolvedValue({
      ok: true,
      json: () => Promise.resolve({ name: "Alice Santos" }),
    })
  );
});

afterEach(() => {
  vi.unstubAllGlobals(); // never leak a stubbed fetch into other tests
});

import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { AuthProvider } from "./AuthContext";
import { WelcomeBanner } from "./WelcomeBanner";

it("greets the signed-in user", () => {
  render(<WelcomeBanner />, {
    // Everything render() mounts gets wrapped in this tree
    wrapper: ({ children }) => (
      <AuthProvider initialUser={{ name: "Thirdy" }}>{children}</AuthProvider>
    ),
  });

  expect(screen.getByText(/welcome back, thirdy/i)).toBeInTheDocument();
});

import { render as rtlRender, RenderOptions } from "@testing-library/react";
import { ReactElement, ReactNode } from "react";
import { ThemeProvider } from "@/context/ThemeContext";
import { AuthProvider } from "@/context/AuthContext";

type User = { name: string } | null;

function AllProviders({
  children,
  user = null,
}: {
  children: ReactNode;
  user?: User;
}) {
  return (
    <ThemeProvider>
      <AuthProvider initialUser={user}>{children}</AuthProvider>
    </ThemeProvider>
  );
}

// Custom render: same signature, but pre-wrapped in every app provider
export function renderWithProviders(
  ui: ReactElement,
  { user, ...options }: RenderOptions & { user?: User } = {}
) {
  return rtlRender(ui, {
    wrapper: ({ children }) => <AllProviders user={user}>{children}</AllProviders>,
    ...options,
  });
}

// Re-export everything else so tests only ever import from test-utils
export * from "@testing-library/react";

import { renderWithProviders, screen } from "@/test/test-utils";
import { it, expect } from "vitest";
import { WelcomeBanner } from "./WelcomeBanner";

it("greets the signed-in user", () => {
  renderWithProviders(<WelcomeBanner />, { user: { name: "Thirdy" } });
  expect(screen.getByText(/welcome back, thirdy/i)).toBeInTheDocument();
});

it("shows the login prompt when signed out", () => {
  renderWithProviders(<WelcomeBanner />); // user defaults to null
  expect(screen.getByRole("link", { name: /log in/i })).toBeInTheDocument();
});

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: "./src/test/setup.ts",
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
      include: ["src/**/*.{ts,tsx}"],
      exclude: ["src/**/*.test.{ts,tsx}", "src/test/**"],
    },
  },
});

// ❌ BAD: invisible to users, tells you nothing about accessibility
await user.click(screen.getByTestId("submit-btn"));

// ✅ GOOD: if this fails, your button is ALSO broken for screen readers
await user.click(screen.getByRole("button", { name: /submit/i }));

// ❌ BAD: assertion races the click — passes or fails at random
user.click(screen.getByRole("button", { name: /add/i }));
expect(screen.getByText("1 item")).toBeInTheDocument();

// ✅ GOOD: the click fully completes before the assertion runs
await user.click(screen.getByRole("button", { name: /add/i }));
expect(screen.getByText("1 item")).toBeInTheDocument();

// ❌ BAD: reaches into internals (needs hacks to even do this)
expect(getComponentState().isModalOpen).toBe(true);

// ✅ GOOD: asserts the thing the user actually experiences
await user.click(screen.getByRole("button", { name: /delete account/i }));
expect(
  screen.getByRole("dialog", { name: /are you sure/i })
).toBeInTheDocument();

// ❌ BAD: 300 lines of HTML that fails on every class rename
expect(container).toMatchSnapshot();

// ✅ GOOD: three assertions that state exactly what matters
expect(screen.getByRole("heading", { name: /order summary/i })).toBeInTheDocument();
expect(screen.getByText("₱1,250.00")).toBeInTheDocument();
expect(screen.getByRole("button", { name: /place order/i })).toBeEnabled();