frontend-typescript-testing

TypeScript Testing Rules (Frontend)

Prerequisite Detection

Inspect package.json, the lockfile, test configuration, and existing test imports before selecting a framework or command. Apply Vitest, React Testing Library, MSW, or Playwright rules only when the dependency/configuration is present. Use the repository's configured equivalent when different. If no runnable harness can be identified, report the inspected paths and the missing framework or command instead of inventing one.

References

Test Type	Reference	When to Use
Unit / Integration	This document	Implementing React component tests with RTL + Vitest + MSW
E2E	references/e2e.md	Implementing browser-level E2E tests with Playwright

Test Framework

• Vitest: Use when the repository config or existing tests select Vitest
• React Testing Library: For component testing
• MSW (Mock Service Worker): For API mocking
• Test imports: import { describe, it, expect, beforeEach, vi } from 'vitest'
• Component test imports: import { render, screen } from '@testing-library/react'
• User interaction: import userEvent from '@testing-library/user-event'
• Mock creation: Use vi.mock()

Basic Testing Policy

Quality Requirements

• Regression protection: assert the named acceptance result, public branch, or failure state on critical paths and high-reuse components
• Independence: Each test can run independently without depending on other tests
• Reproducibility: Control time, randomness, environment values, network responses, and browser state so identical inputs produce the same observable result
• Readability: Each test names one user-visible behavior, separates setup/action/assertion, and keeps fixtures limited to values used by that behavior

Where to concentrate test rigor

For shared components, custom hooks, and utilities reused across features, cover their public branches, error states, and boundary contracts because their regression blast radius is wider. Verify page-level composition through integration/E2E tests when the behavior depends on multiple rendered units.