community-rule/docs/TESTING_QUICK_REFERENCE.md

Testing Quick Reference

🚀 Essential Commands

Daily Development

# Run all tests
npm test

# Watch mode (during development)
npm run test:watch

# E2E tests
npm run e2e

# Performance check
npm run lhci

Visual Regression

# Update baselines after intentional changes
npx playwright test tests/e2e/visual-regression.spec.ts --update-snapshots

# Check for visual changes
npx playwright test tests/e2e/visual-regression.spec.ts

Debugging

# Debug unit tests
npm run test:ui

# Debug E2E tests
npm run e2e:ui

# Debug with browser
npx playwright test --debug

📝 Writing Tests

Unit Test Template

// tests/unit/Component.test.jsx
import { render, screen } from "@testing-library/react";
import { describe, test, expect, afterEach } from "vitest";
import { cleanup } from "@testing-library/react";
import Component from "../../app/components/Component";

describe("Component", () => {
  afterEach(() => cleanup());

  test("renders correctly", () => {
    render(<Component />);
    expect(screen.getByRole("button")).toBeInTheDocument();
  });
});

E2E Test Template

// tests/e2e/feature.spec.ts
import { test, expect } from "@playwright/test";

test.describe("Feature", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/");
  });

  test("should work correctly", async ({ page }) => {
    await expect(page).toHaveTitle(/CommunityRule/);
    await expect(page.locator("h1")).toBeVisible();
  });
});

🔧 Common Testing Patterns

Testing User Interactions

// Unit test
import userEvent from "@testing-library/user-event";

test("handles user input", async () => {
  const user = userEvent.setup();
  render(<Form />);

  await user.type(screen.getByLabelText("Email"), "test@example.com");
  await user.click(screen.getByRole("button", { name: "Submit" }));

  expect(screen.getByText("Success")).toBeInTheDocument();
});

Testing Async Operations

// Unit test
test("loads data", async () => {
  render(<DataComponent />);

  expect(screen.getByText("Loading...")).toBeInTheDocument();

  await waitFor(() => {
    expect(screen.getByText("Data loaded")).toBeInTheDocument();
  });
});

Testing Accessibility

// E2E test
import { runA11y } from "./axe";

test("meets accessibility standards", async ({ page }) => {
  await page.goto("/");
  const violations = await runA11y(page);
  expect(violations).toEqual([]);
});

🎯 Test Coverage Targets

• Lines: 85%
• Functions: 85%
• Statements: 85%
• Branches: 80%

🚨 Common Issues & Solutions

Unit Tests

# Issue: JSX not parsing in .js files
# Solution: Ensure vitest.config.js has proper esbuild config

# Issue: Component not rendering
# Solution: Check imports and component exports

# Issue: Test cleanup errors
# Solution: Add afterEach(cleanup()) to test suites

E2E Tests

# Issue: Element not found
# Solution: Use semantic selectors (role, text, label)

# Issue: Test timeout
# Solution: Add proper waitFor or waitForLoadState

# Issue: Multiple elements with same selector
# Solution: Use .first(), .nth(), or more specific selectors

Visual Regression

# Issue: Screenshots don't match
# Solution: Check if changes are intentional, then update baselines

# Issue: Elements not visible
# Solution: Ensure elements are in viewport before screenshot

📊 Performance Budgets

Lighthouse CI Targets

• Performance Score: >90
• Accessibility Score: >95
• Best Practices: >90
• SEO Score: >90

Core Web Vitals

• LCP: <2.5s
• FID: <100ms
• CLS: <0.1

🔄 CI/CD Pipeline Jobs

1. Unit Tests (Node 18, 20)
2. E2E Tests (Chromium, Firefox, WebKit)
3. Visual Regression Tests
4. Performance Tests
5. Storybook Tests
6. Lint & Format
7. Build Verification

📁 Test File Structure

tests/
├── unit/                          # Component tests
│   ├── Button.test.jsx
│   ├── HeroBanner.test.jsx
│   └── ...
├── integration/                   # Integration tests
│   └── ContentLockup.integration.test.jsx
└── e2e/                          # E2E tests
    ├── homepage.spec.ts
    ├── user-journeys.spec.ts
    ├── edge-cases.spec.ts
    └── visual-regression.spec.ts

🎨 Visual Regression Screenshots

Generated Screenshots

• Full page (mobile, tablet, desktop)
• Component sections (hero, logo wall, cards)
• Interactive states (hover, focus, loading)
• Special modes (dark, high contrast, reduced motion)

Managing Changes

# Intentional changes
npx playwright test tests/e2e/visual-regression.spec.ts --update-snapshots

# Review changes
npx playwright test tests/e2e/visual-regression.spec.ts

📈 Monitoring

Test Metrics

• Unit Tests: 124 tests
• E2E Tests: 308 tests (4 browsers)
• Visual Screenshots: 92 baselines
• Coverage: >85% target

CI Metrics

• Pipeline Jobs: 7 parallel jobs
• Execution Time: Monitor build performance
• Success Rate: Track pipeline stability
• Artifacts: Test results and screenshots

🔗 Useful Links

• Full Testing Documentation
• Vitest Docs
• Playwright Docs
• React Testing Library
• Lighthouse CI

---

Quick Reference Version: December 2024