> nextjs-testing
Unit, Integration, and E2E testing standards for App Router. Use when writing unit, integration, or Playwright E2E tests for a Next.js App Router project. (triggers: **/*.test.{ts, tsx}, cypress/**, tests/**, vitest, playwright, msw, testing-library)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-testing?format=md"Next.js Testing
Priority: P1 (HIGH)
Structure
tests/
├── unit/ # Vitest + RTL
├── e2e/ # Playwright
└── mocks/ # MSW Handlers
Implementation Guidelines
- Unit Testing: Use Vitest for speed and React Testing Library for components.
- E2E Testing: Use Playwright for full-stack App Router validation.
- MSW: Mock API boundaries using Mock Service Worker (server + client).
- RSC Testing: Test Server Components via unit tests or full E2E flow.
- Data Isolation: Use isolation strategies for test databases/cache.
- CI reporting: Ensure JSON/JUnit output for automated analysis.
Anti-Patterns
- Real Fetches: No real network usage: Always use MSW or mocks.
- Shallow Testing: No implementation testing: Test user behavior only.
- Slow suites: No heavy E2E for unit logic: Use Vitest for logic.
- Global mocks: No global state leakage: Reset mocks after each test.
References
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)