frontend-typescript-testing
TypeScript Testing Rules (Frontend)
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: This project uses 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
More from shinpr/ai-coding-project-boilerplate
documentation-criteria
Guides PRD, ADR, Design Doc, UI Spec, and Work Plan creation. Use when creating or reviewing technical documents, or when "UI spec/screen design/component decomposition" is mentioned.
12project-context
Provides project-specific prerequisites for AI execution accuracy. Use when checking project structure.
10coding-standards
Detects code smells, anti-patterns, and readability issues. Use when implementing features, reviewing code, or refactoring.
9technical-spec
Defines environment variables, architecture design, and build/test commands. Use when configuring environment or designing architecture.
9task-analyzer
Analyzes task essence and selects appropriate skills. Returns scale estimates and metadata. Use when starting tasks or selecting skills.
9typescript-rules
Applies type safety and error handling rules. Enforces no-any policy and type guards. Use when implementing TypeScript or reviewing types.
9