← ClaudeAtlas

testing-patternslisted

Guide for writing tests with Jest and React Testing Library. Use this when creating tests, debugging test failures, or implementing test patterns for Server Actions and Next.js 15.
SilverAssist/agents-toolkit · ★ 1 · Testing & QA · score 64
Install: claude install-skill SilverAssist/agents-toolkit
# Testing Patterns Skill When writing tests in this project, follow these patterns specific to Next.js 15 and React 19. ## Critical Next.js 15 Testing Constraints ### ❌ Async Server Components - NOT Fully Supported ```typescript // ❌ CANNOT test async Server Components with Jest export default async function ServerComponent() { const data = await fetch('https://api.example.com/data'); return <div>{data.title}</div>; } // ❌ This will fail in Jest describe('ServerComponent', () => { it('should render', async () => { const { container } = render(await ServerComponent()); // Error! }); }); // ✅ Solution: Use E2E tests (Playwright) for async components ``` ### ❌ API Routes - Avoid Testing in Jest ```typescript // ❌ Web API compatibility issues import { POST } from '@/app/api/webhook/route'; describe('Webhook', () => { it('should process', async () => { const request = new NextRequest(...); // ❌ Error: Request not defined await POST(request); }); }); // ✅ Solution: Test Server Actions instead ``` ## Mock Setup Order - CRITICAL ### Mocks MUST come BEFORE imports ```typescript // ✅ CORRECT: Mock first, then import const mockStripeCreate = jest.fn(); jest.mock('stripe', () => { return class MockStripe { checkout = { sessions: { create: (...args: unknown[]) => mockStripeCreate(...args) } }; }; }); // THEN import import { createCheckoutSession } from '@/actions/checkout'; // ❌ INCORRECT: Import before mock import