sk-testing-nextjs

Configure Vitest and RTL for Next.js unit and component tests.

Updated May 19, 2026
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill sk-testing-nextjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sk-testing-nextjs
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.claude/skills/sk-testing-nextjs
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill sk-testing-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The sk-testing-nextjs skill removes the friction of setting up and using the TimeKast Starter Kit’s Vitest + RTL testing environment, especially the common pain of mocking kit auth and Drizzle/DB schema code in jsdom.

Core Features & Use Cases

  • Kit-aligned Vitest infrastructure: Uses the shipped vitest.config.ts (jsdom, setup wiring, @ aliases, and v8 coverage exclusions) and vitest.setup.ts (RTL/JSDOM cleanup + jest-dom matchers).
  • Action testing with house-style mocks: Provides a reliable pattern for testing server actions by mocking module boundaries like @/lib/auth, @/lib/auth/permissions, and next/cache, while asserting on the returned { error } / { data } shape.
  • Drizzle-friendly DB mocking: Uses a chainable createChain() thenable helper to mock Drizzle query builder flows cleanly, without brittle chain replication.
  • Schema module mocking for jsdom safety: Mocks @/lib/db/schema/** modules as plain objects to avoid crashing imports from the Postgres/Neon driver in the test runtime.
  • Component testing best practices: Supports RTL component tests with the kit’s setup so you can test behavior (roles, userEvent) rather than internals.
  • Scope guidance: Clearly separates unit/component coverage vs E2E responsibilities (Playwright) according to the kit’s coverage strategy.

Quick Start

Use sk-testing-nextjs when writing a Vitest test that mocks kit auth or Drizzle DB access for unit/component coverage.

Frequently Asked Questions about sk-testing-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I mock Drizzle ORM queries in Vitest without breaking the chainable methods?

Mock Drizzle ORM queries in Vitest using a chainable thenable helper like createChain() to replicate query builder flows cleanly. This avoids brittle manual chain replication when testing server actions depending on Drizzle database access.

Why does Vitest crash in jsdom when importing Drizzle schema files?

Vitest crashes in jsdom because importing Drizzle schema files triggers the Postgres/Neon driver, which cannot run in the test runtime. Mock the @/lib/db/schema/** modules as plain objects to prevent these driver crashes during test execution.

How do I test Next.js server actions that depend on NextAuth and next/cache?

Test Next.js server actions by mocking module boundaries like @/lib/auth, @/lib/auth/permissions, and next/cache using Vitest. Assert on the returned ActionResult shape, checking for { error } or { data } properties to validate action behavior deterministically.

How do I set up React Testing Library and jest-dom matchers for Next.js component tests?

Set up React Testing Library and jest-dom matchers by wiring vitest.setup.ts to include RTL/JSDOM cleanup and jest-dom matcher registration. Configure vitest.config.ts with jsdom environment, @ path aliases, and v8 coverage exclusions for accurate component behavior testing.

What is the best way to separate unit test coverage from E2E testing in a Next.js kit?

Separate unit test coverage from E2E testing by using Vitest and RTL for component and server action logic, while delegating user flow validation to Playwright. Apply deterministic mocks for kit boundaries to keep unit tests fast and isolated from E2E responsibilities.