Testing Guide

1$# Unit tests (Vitest)
2$npm test                 # Run all unit tests
3$npm run test:watch       # Watch mode
4$npm run test:coverage    # Generate coverage report
5$npm run test:ui          # Open Vitest UI
6
7$# E2E tests (Playwright)
8$npm run test:e2e         # Run all E2E tests
9$npm run test:e2e:ui      # Open Playwright UI
10$npm run test:e2e:headed  # Run with visible browser
11
12$# Accessibility tests
13$npm run test:a11y        # Run accessibility tests
14
15$# All tests
16$npm run test:all         # Run Vitest + Playwright

1// tests/unit/components/button.test.tsx
2import { render, screen, fireEvent } from "@testing-library/react";
3import { describe, it, expect, vi } from "vitest";
4import { Button } from "@/components/ui/button";
5
6describe("Button", () => {
7  it("renders with correct text", () => {
8    render(<Button>Click me</Button>);
9    expect(screen.getByRole("button")).toHaveTextContent("Click me");
10  });
11
12  it("calls onClick when clicked", () => {
13    const onClick = vi.fn();
14    render(<Button onClick={onClick}>Click me</Button>);
15
16    fireEvent.click(screen.getByRole("button"));
17    expect(onClick).toHaveBeenCalledTimes(1);
18  });
19
20  it("is disabled when disabled prop is true", () => {
21    render(<Button disabled>Click me</Button>);
22    expect(screen.getByRole("button")).toBeDisabled();
23  });
24});

1// tests/unit/hooks/use-debounce.test.ts
2import { renderHook, act } from "@testing-library/react";
3import { describe, it, expect, vi } from "vitest";
4import { useDebounce } from "@/hooks/use-debounce";
5
6describe("useDebounce", () => {
7  beforeEach(() => {
8    vi.useFakeTimers();
9  });
10
11  afterEach(() => {
12    vi.useRealTimers();
13  });
14
15  it("debounces value changes", () => {
16    const { result, rerender } = renderHook(
17      ({ value, delay }) => useDebounce(value, delay),
18      { initialProps: { value: "initial", delay: 500 } }
19    );
20
21    rerender({ value: "updated", delay: 500 });
22    expect(result.current).toBe("initial");
23
24    act(() => {
25      vi.advanceTimersByTime(500);
26    });
27
28    expect(result.current).toBe("updated");
29  });
30});

1// tests/e2e/auth.spec.ts
2import { test, expect } from "@playwright/test";
3
4test.describe("Authentication", () => {
5  test("user can sign up", async ({ page }) => {
6    await page.goto("/signup");
7
8    await page.fill('input[name="email"]', "test@example.com");
9    await page.fill('input[name="password"]', "SecurePass123!");
10    await page.fill('input[name="name"]', "Test User");
11
12    await page.click('button[type="submit"]');
13
14    await expect(page).toHaveURL(/dashboard|verify/);
15  });
16
17  test("user can sign in", async ({ page }) => {
18    await page.goto("/signin");
19
20    await page.fill('input[name="email"]', "existing@example.com");
21    await page.fill('input[name="password"]', "password123");
22
23    await page.click('button[type="submit"]');
24
25    await expect(page).toHaveURL("/dashboard");
26  });
27});

1// tests/accessibility/home.spec.ts
2import { test, expect } from "@playwright/test";
3import AxeBuilder from "@axe-core/playwright";
4
5test.describe("Accessibility", () => {
6  test("home page has no a11y violations", async ({ page }) => {
7    await page.goto("/");
8
9    const results = await new AxeBuilder({ page }).analyze();
10
11    expect(results.violations).toEqual([]);
12  });
13});

1# .github/workflows/test.yml
2name: Tests
3
4on: [push, pull_request]
5
6jobs:
7  test:
8    runs-on: ubuntu-latest
9
10    steps:
11      - uses: actions/checkout@v4
12
13      - name: Setup Node.js
14        uses: actions/setup-node@v4
15        with:
16          node-version: "20"
17          cache: "npm"
18
19      - name: Install dependencies
20        run: npm ci
21
22      - name: Run unit tests
23        run: npm test
24
25      - name: Install Playwright
26        run: npx playwright install --with-deps
27
28      - name: Run E2E tests
29        run: npm run test:e2e