What a test runner does, in 25 lines
A runner collects tests first, then runs them one by one, cleaning up in between, and prints a summary. The third test is wrong on purpose so you can see a failure message. Vitest does the same with far better messages, timing, watch mode and parallel files.
Vitest runs your test files in Node with jsdom pretending to be a browser, React Testing Library renders components into that fake page, and a setup file adds jest-dom matchers and cleans up after each test.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a vitest.config.js for a project that wants jsdom, no globals, and a setup file at test/setup.js. Then write that setup file.
Write a real test file (Vitest syntax, jest-dom) for a Badge component that renders <span>New</span> when isNew is true and nothing otherwise.
Explain it without notes
What is jsdom and what can't it do?
What goes in a Vitest setup file for React Testing Library and why?
What is the difference between vitest and vitest run?
Why does RTL 16 make you install @testing-library/dom yourself?
Preview
Console
Nothing logged yet.Expected console output
✓ Toggle > starts off
✓ Toggle > turns on when clicked
× Toggle > says 'enabled' when on (a wrong expectation)
→ expected "Dark mode: on" to contain "enabled"
Tests 1 failed | 2 passed (3)