writing-tests

| Type | What | When | Tools |

|------|------|------|-------|

| Unit | Single function/hook | Pure logic, calculations | Vitest, Jest |

| Integration | Component + deps | Forms, data display | Testing Library |

| E2E | Full user flow | Critical paths | Playwright |

• Auth flows
• Payment/checkout
• Data mutations (create, update, delete)
• Authorization rules
• Critical business logic

• Static content
• Third-party internals
• Pure styling

```

src/components/Button/

├── Button.tsx

└── Button.test.tsx # Colocated

e2e/ # E2E at root

├── auth.spec.ts

└── checkout.spec.ts

```

Arrange-Act-Assert

```typescript

test('increments on click', () => {

// Arrange

render()

// Act

fireEvent.click(screen.getByRole('button'))

// Assert

expect(screen.getByText('1')).toBeInTheDocument()

})

```

Query Priority (best → worst)

1. getByRole - semantic, accessible
2. getByLabelText - form inputs
3. getByText - content
4. getByTestId - last resort

Test Behavior, Not Implementation

```typescript

// ❌ Implementation

expect(component.state.isOpen).toBe(true)

// ✅ Behavior

expect(screen.getByRole('dialog')).toBeVisible()

```

If time-constrained:

1. E2E for happy paths (covers most ground)
2. Unit for complex logic (catches edge cases)
3. Integration for critical components (forms, data)

For API mocking, test fixtures, and coverage guidance, see [MOCKING.md](MOCKING.md).