Get your first Vitest test passing against a real component

I installed Vitest, wrote one test, and it fails before it even reaches my code, with jsdom missing entirely.

BeginnerRead 5 minDoing: under an hour6 steps

What you'll have at the end

A Vitest suite wired to jsdom and Testing Library: your first component test passes on its own, and a second test right after it passes too, with nothing left over between them.

Before you start

You need

A Vite-built React project with at least one function component that renders something on screen, and its package manager ready to add new dev dependencies.

Not covered

Picking Vitest over another test runner, wiring coverage thresholds, or simulating clicks and keystrokes inside a test; this recipe stops once a component renders and a second test proves the first one left nothing behind.

Leans on

Get one test past the DOM and the matcher

Install Vitest and the DOM testing packages
Write and run one failing component test
Turn on Vitest's jsdom test environment
Wire jest-dom's matchers into a setup file

Prove the suite doesn't lie to you

Add a second test to check for leftovers
Unmount every component between tests

Where to go next

Query a component the way a screen reader would

once your first test is green and you want every query in it to hold up the way a screen reader actually reads the page, past satisfying one lone assertion

Swap fireEvent for user-event in tests

once you're clicking and typing inside a test rather than just checking that something rendered

Checked 24 Aug 2026

Part of the Vitest Testing Framework cookbook