nextjs-frontend-testing

Set up testing for Next.js by configuring Vitest or Jest as your test runner, React Testing Library for component tests, and Playwright for E2E tests. The Skill automates this configuration, defines test folders and scripts in package.json, and aligns setup with Next.js App Router idioms, TypeScript, Tailwind, and shadcn/ui.

Unit tests validate isolated logic functions. Component tests verify React component behavior and user interactions using React Testing Library. E2E tests simulate complete user flows like sign-up or login across your full Next.js app using Playwright. This Skill covers all three types for comprehensive coverage.

Vitest and Jest are alternative test frameworks for Next.js; you choose one as your primary runner. This Skill configures either Vitest or Jest for unit and component tests, then layers Playwright on top for E2E testing, so you don't run both frameworks simultaneously.

Use Playwright to write E2E tests that simulate real user journeys—sign-up, login, and navigation—across your Next.js app. This Skill generates and maintains E2E test cases that validate app functionality from the user's perspective, ensuring critical flows work reliably in production.

Yes. This Skill is designed specifically for Next.js App Router projects and handles testing across both server and client component contexts, ensuring your unit, component, and E2E tests respect App Router boundaries and server/client separation.

Ensure you have a Next.js App Router project with TypeScript, Tailwind, and shadcn/ui already in place. The Skill requires these as inputs and configures test frameworks, test folders, and package.json scripts on top of your existing setup.