Testing Strategy & Best Practices

# Test strategy decision matrix
What to test:
  - User-visible behavior (renders, interactions, navigation)
  - Business logic (calculations, validation, state transitions)
  - Edge cases (empty states, errors, loading, boundary values)
  - Regression bugs (write a test for every bug fix)
 
What NOT to test:
  - Implementation details (internal state, private methods)
  - Third-party library internals
  - CSS styling (unless visual regression matters)
  - Trivial code (simple prop passthrough components)

# .github/workflows/ci.yml
name: CI
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  # Stage 1: Fast checks (run on every push)
  lint-and-typecheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
 
      - run: npm ci
      - run: npm run lint
      - run: npm run typecheck
 
  # Stage 2: Unit and integration tests (run on every push)
  unit-tests:
    runs-on: ubuntu-latest
    needs: lint-and-typecheck
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
 
      - run: npm ci
      - run: npm run test:run -- --coverage
 
      - name: Upload coverage
        uses: actions/upload-artifact@v4
        with:
          name: coverage-report
          path: coverage/
 
  # Stage 3: E2E tests (run on PRs to main and merges)
  e2e-tests:
    runs-on: ubuntu-latest
    needs: unit-tests
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
 
      - run: npm ci
      - run: npx playwright install --with-deps chromium
 
      - name: Build application
        run: npm run build
 
      - name: Run E2E tests
        run: npx playwright test --project=chromium
        env:
          CI: true
 
      - name: Upload test results
        uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 7
 
  # Stage 4: Deploy (only on main)
  deploy:
    runs-on: ubuntu-latest
    needs: [unit-tests, e2e-tests]
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - run: echo "Deploy step here"

// package.json scripts
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "typecheck": "tsc --noEmit",
    "test": "vitest",
    "test:run": "vitest run",
    "test:coverage": "vitest run --coverage",
    "test:e2e": "playwright test",
    "test:e2e:ui": "playwright test --ui"
  }
}

// vitest.config.ts -- practical coverage thresholds
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html", "lcov"],
      thresholds: {
        // Set meaningful thresholds, not 100%
        lines: 80,
        functions: 80,
        branches: 75,
        statements: 80,
      },
      include: ["src/**/*.{ts,tsx}"],
      exclude: [
        "src/**/*.test.{ts,tsx}",
        "src/**/*.stories.{ts,tsx}",
        "src/**/*.d.ts",
        "src/app/**/layout.tsx",
        "src/app/**/loading.tsx",
        "src/app/**/not-found.tsx",
      ],
    },
  },
});

// Pattern: describe(unit) > it(behavior)
describe("CartStore", () => {
  it("adds item to empty cart");
  it("increments quantity for duplicate items");
  it("removes item by id");
  it("calculates total with mixed quantities");
});
 
// Pattern: should/when for complex behaviors
describe("CheckoutForm", () => {
  it("submits order when all fields are valid");
  it("shows validation error when email is missing");
  it("disables submit button while processing");
});
 
// Avoid:
it("works"); // too vague
it("test addItem"); // do not start with "test"
it("should call setCount with count + 1"); // tests implementation

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run lint
      - run: npm run typecheck
      - run: npm run test:run

// package.json (with lint-staged)
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "vitest related --run"]
  }
}

// TypeScript IS a testing tool -- strict mode catches bugs before tests
// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}
 
// These TypeScript errors replace entire categories of tests:
// - null/undefined access tests (strictNullChecks)
// - wrong argument type tests (strict function types)
// - missing property tests (exact optional property types)