TypeScript Testing

Target: $ARGUMENTS

Writes focused, behavior-driven tests following project testing strategy.

Quick Reference

TDD methodology (language-agnostic): See tdd-core plugin (testing-tdd skill)

TypeScript-specific documentation: references/

• references/testing-strategy-ts.md — TypeScript tools (vitest, @testing-library/react, MSW)
• references/tdd-best-practices-ts.md — TypeScript TDD examples (extends tdd-core)

Quick Decision

vitest (default): Use it/test for known cases, vi.mock for module mocking. Works at unit/integration levels.

@testing-library/react (components): Use for React component behavior testing with render, screen, userEvent.

See references/testing-strategy-ts.md for full methodology comparison.

TDD Essentials (Quick Reference)

Cycle: RED (failing test / type error) -> GREEN (minimal pass) -> REFACTOR (clean up)

Structure: Arrange-Act-Assert (AAA)

it('calculates order total from item prices', () => {
  // ARRANGE
  const items = [{ price: 10, qty: 2 }, { price: 5, qty: 1 }];
  const calculator = new OrderCalculator();

  // ACT
  const total = calculator.total(items);

  // ASSERT
  expect(total).toBe(25);
});

Component Testing Priorities

Priority	Area	Example
CRITICAL	User interactions	Button click triggers handler
CRITICAL	Conditional rendering	Error state shows message
HIGH	Form validation	Invalid input shows error
HIGH	Async data loading	Loading -> success/error states

What to Test (KISS/DRY/YAGNI)

High-Value: Business logic, error paths, component behavior, async flows, custom hooks

Avoid: Type system behavior, library internals, CSS styling, implementation details

See references/testing-strategy-ts.md -> "Patterns to Remove" for full list.

Naming Convention

Format: {module} > {component} > {behavior}

describe('UserService', () => {
  it('creates a new user with valid data', () => { ... });
  it('rejects duplicate email addresses', () => { ... });
});

Execution

npx vitest                          # Watch mode (default)
npx vitest run                      # Single run
npx vitest run src/utils            # Filter by path
npx vitest run --reporter=verbose   # Verbose output
npx vitest --ui                     # Browser UI

Quality Gates

• All tests pass (npx vitest run)
• TDD Red-Green-Refactor followed
• Arrange-Act-Assert structure used
• Naming convention followed
• Behavior-focused (not implementation)
• No library/framework behavior tested
• Mocks use vi.mock() with proper restore (vi.restoreAllMocks())