react-testing

React Testing Skill

Testing Tools

• Use Vitest as the primary test runner.
• Use @testing-library/react for component behavior testing.
• Use Playwright for all End-to-End (E2E) testing.

Directory Structure

All test files are located under web/tests/ and are organized as follows:

• tests/unit/: Contains unit tests testing components, hooks, features, and utils in isolation using Vitest and React Testing Library.
• tests/e2e/: Contains end-to-end integration tests that run in a browser using Playwright.
• tests/mocks/: Contains mocks for external integrations or APIs.
• tests/fixtures/: Contains reusable test fixtures or data.
• tests/test_utils.tsx: Contains common testing utilities, such as a custom render wrapper.

Standards & Best Practices

• Test user interactions rather than implementation details.
• Ensure all tests are isolated and don't depend on global state.
• No Comments Needed: No need to add comments inside any of the test code (like // Arrange, // Act, // Assert). The test or it description strings are enough to explain the test logic.
• Code Coverage: Ensure test coverage is strictly more than 80% of the lines.
• Mocking: Use vi.fn() for mock functions and vi.mock() for module mocks in Vitest.

Example: Unit Test (Vitest + Testing Library)

import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { ArchiveCard } from "@/components/ArchiveCard";

const todo = {
  id: "todo-1",
  title: "Old Project Notes",
  isCompleted: false,
  createdAt: "2024-01-01T00:00:00Z",
  updatedAt: "2024-03-01T00:00:00Z",
};

describe("ArchiveCard", () => {
  it("renders the todo title", () => {
    render(<ArchiveCard todo={todo} onRestore={vi.fn()} onDelete={vi.fn()} />);
    expect(screen.getByText("Old Project Notes")).toBeInTheDocument();
  });

  it("calls onRestore with the todo id when Restore is clicked", () => {
    const onRestore = vi.fn();
    render(
      <ArchiveCard todo={todo} onRestore={onRestore} onDelete={vi.fn()} />,
    );
    fireEvent.click(screen.getByRole("button"));
    fireEvent.click(screen.getByText("Restore"));
    expect(onRestore).toHaveBeenCalledWith("todo-1");
  });
});