Component Testing Patterns

Comprehensive testing patterns for React components with MSW, React Query, and Vitest. All components require comprehensive tests with minimum 80% coverage.

When to Apply

Reference these patterns when:

• •Writing new component tests
• •Setting up MSW mocks for API interactions
• •Testing React Query data fetching
• •Ensuring test coverage requirements
• •Testing user interactions and form validation
• •Testing error states and loading states

Quick Reference

Test File Structure

• •File naming: ComponentName.test.tsx next to ComponentName.tsx
• •Minimum coverage: 80% line coverage
• •Colocation: Tests must be next to implementation files

Essential Setup

import { render, screen, waitFor } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { server } from "@/msw/server";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

Test Coverage Requirements

• •✅ Minimum 80% line coverage
• •✅ Cover all user interaction paths
• •✅ Test all API integration points
• •✅ Verify error handling and edge cases
• •✅ Test accessibility features

How to Use

For detailed instructions, examples, and patterns:

• •Full guide: AGENTS.md - Complete testing documentation
• •Individual rules: See rules/ directory for specific testing patterns

References

• •See embedded-components/ARCHITECTURE.md for architecture patterns
• •See AGENTS.md for complete testing documentation
• •See .github/skills/code-quality-workflow/ for testing workflows