reviewing-test-quality
Review: Test Quality
For Vitest configuration validation (pool options, coverage setup, deprecated patterns), see vitest-4/skills/reviewing-vitest-config/SKILL.md.
Checklist
Test Coverage
- Components have tests for user interactions
- Forms test both success and error paths
- Server Actions tested in isolation
- Custom hooks tested with
renderHook - Edge cases covered (empty states, errors, loading)
React 19 APIs
- Forms using
useActionStatehave tests -
useOptimisticupdates tested for immediate feedback -
useFormStatustested within form component context - Server Actions tested with mocked auth/database
-
use()hook tested with Promises and Context
Testing Patterns
- Using
@testing-library/reactand@testing-library/user-event - Queries prefer accessibility (
getByRole,getByLabelText) -
waitForused for async assertions - Mocking external dependencies (API, database)
- Tests are isolated and don't depend on each other
Anti-Patterns
- ❌ Testing implementation details (internal state, methods)
- ❌ Querying by class names or data-testid when role available
- ❌ Not waiting for async updates (
waitFor) - ❌ Testing components without user interactions
- ❌ Missing error case tests
Server Action Testing
- Server Actions tested as functions (not through UI)
- Input validation tested
- Authentication/authorization tested
- Database operations mocked
- Error handling tested
For typed test fixtures and mocks, use the TYPES-generics skill from the typescript plugin.
For comprehensive testing patterns, see: research/react-19-comprehensive.md.
More from djankies/claude-configs
optimizing-with-react-compiler
Teaches what React Compiler handles automatically in React 19, reducing need for manual memoization. Use when optimizing performance or deciding when to use useMemo/useCallback.
16reviewing-prisma-patterns
Review Prisma code for common violations, security issues, and performance anti-patterns found in AI coding agent stress testing. Use when reviewing Prisma Client usage, database operations, or performing code reviews on projects using Prisma ORM.
8migrating-from-v3
Migrate from Tailwind CSS v3 to v4 including configuration migration (JS to CSS), utility renames, opacity changes, and color system updates. Use when upgrading existing projects to v4.
6implementing-query-pagination
Implement cursor-based or offset pagination for Prisma queries. Use for datasets 100k+, APIs with page navigation, or infinite scroll/pagination mentions.
5using-reducers
Teaches useReducer for complex state logic in React 19. Use when state updates depend on previous state, multiple related state values, or complex update logic.
5implementing-code-splitting
Teaches code splitting with lazy() and Suspense in React 19 for reducing initial bundle size. Use when implementing lazy loading, route-based splitting, or optimizing performance.
5