No Vitest tests running yet in this App Router project

Jest's config for the App Router is a wall of transforms and mocks, so testing kept getting put off.

Beginner to intermediateRead 4 minDoing: about 45 minutes6 steps

▶ Start

What you'll have at the end

A working vitest.config.ts with jsdom set up, and one passing test against a real Client Component

Before you start

You need

An App Router project that already runs locally, containing at least one component marked for the client with its own local state, and no test runner wired up yet.

Not covered

Testing an async Server Component or a Server Action directly; those need a different approach since a jsdom-based test never runs the server's own render pipeline.

Leans on

NextJS Cheat Sheetthe Testing Strategies table lays out how Vitest fits next to Jest, Playwright and Cypress in an App Router project.
Vitest Testing Framework Cheat Sheetcovers the config options and Testing Library wiring this recipe walks through, plus what sits beyond it.

6 steps

Where to go next

Get your first Vitest test passing against a real component

for the same jsdom-and-Testing-Library setup on a plain Vite React project instead of an App Router one

Checked 25 Aug 2026

Part of the NextJS cookbook