Component Testing Patterns Skill

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

Agent Skills: Component Testing Patterns

Install this agent skill to your local

Skill Files