What Is Vitest? The Modern Testing Framework AI Keeps Choosing

Why AI Coders Need to Know This

Here's a situation that's happening more and more: You ask Claude or ChatGPT to add tests to your project. You've heard of Jest — maybe you've even used it. But instead of Jest, the AI generates something called Vitest. The imports look different. The config file has a different name. And you're sitting there wondering if AI just made something up.

It didn't. Vitest is real, it's gaining massive momentum, and there's a good reason AI keeps reaching for it.

Think of it like this: Jest is your trusty corded circular saw. It's been the standard for years. It works great. But it needs an extension cord, the right blade adapter, and sometimes you have to fiddle with the guard. Vitest is the cordless version. Same cuts, same precision, but it just... works. You pull the trigger and it goes.

If your project was scaffolded with Vite — and most new React, Vue, and Svelte projects are — then Vitest plugs in without any extra wiring. That's exactly why AI chooses it. AI models optimize for "code that works on the first try," and Vitest requires the least configuration for modern projects.

As a vibe coder, you don't need to become a Vitest expert. You need to know three things:

1. What it is — so you're not confused when AI generates it
2. How to run it — so you can actually execute the tests
3. How to read the output — so you know if your code works or not

That's exactly what this article covers.

Real Scenario: You Asked AI to Add Tests

You expected maybe a Jest file. You've seen those before. But Claude looked at your project, saw the vite.config.ts file, and made a decision: this project uses Vite, so Vitest is the right testing tool.

It generated a test file, added a line to your package.json, and told you to run npx vitest. Now you're staring at code that looks almost familiar but not quite.

Let's look at exactly what it created.

What AI Generated

Here's the utility function you already had — the one that calculates project estimates:

// src/utils/estimate.ts

export function calculateEstimate(
  squareFootage: number,
  materialCostPerSqFt: number,
  laborRate: number,
  markupPercent: number = 15
): { materials: number; labor: number; markup: number; total: number } {
  const materials = squareFootage * materialCostPerSqFt;
  const labor = squareFootage * laborRate;
  const subtotal = materials + labor;
  const markup = subtotal * (markupPercent / 100);
  const total = subtotal + markup;

  return { materials, labor, markup, total };
}

And here's the test file AI generated for it:

// src/utils/__tests__/estimate.test.ts

import { describe, it, expect } from 'vitest';
import { calculateEstimate } from '../estimate';

describe('calculateEstimate', () => {

  it('calculates a basic estimate with default markup', () => {
    const result = calculateEstimate(1000, 3.50, 2.00);
    expect(result.materials).toBe(3500);
    expect(result.labor).toBe(2000);
    expect(result.markup).toBe(825);
    expect(result.total).toBe(6325);
  });

  it('applies custom markup percentage', () => {
    const result = calculateEstimate(500, 4.00, 2.50, 20);
    expect(result.total).toBe(3900);
  });

  it('handles zero square footage', () => {
    const result = calculateEstimate(0, 3.50, 2.00);
    expect(result.total).toBe(0);
  });

  it('handles large projects', () => {
    const result = calculateEstimate(50000, 5.00, 3.00);
    expect(result.total).toBe(460000);
  });

  it('returns all four cost components', () => {
    const result = calculateEstimate(100, 2.00, 1.00);
    expect(result).toHaveProperty('materials');
    expect(result).toHaveProperty('labor');
    expect(result).toHaveProperty('markup');
    expect(result).toHaveProperty('total');
  });

});

If you've seen Jest tests before, this looks almost identical. That's intentional. Vitest was designed to be a drop-in replacement for Jest. The only visible difference? That first line: import { describe, it, expect } from 'vitest'.

In Jest, those functions are available automatically — they're "global." In Vitest, you import them explicitly. That one line is often the only difference you'll notice between Vitest and Jest test files.

Understanding Each Part

Let's break down what every piece of this test file actually does. Not the computer science behind it — just what it means for you.

The Import Line

import { describe, it, expect } from 'vitest';

This grabs the three tools you need from Vitest. Think of it like pulling three specific tools out of your toolbox before starting a job:

• describe — creates a labeled group of related tests (like a section on your punch list)
• it — defines one specific check (like one item on that punch list)
• expect — makes the actual comparison ("I expect this value to equal that value")

The describe Block

describe('calculateEstimate', () => {
  // all tests go inside here
});

This is just a label. It says "everything inside here is testing the calculateEstimate function." When you run the tests, this name shows up in the output so you know which function the results are about. If you had ten different functions, you'd have ten describe blocks, each with a clear label.

It's your punch list header: "Kitchen — Final Walkthrough Items."

The it Statements

it('calculates a basic estimate with default markup', () => {
  // the actual check happens here
});

Each it block is one specific thing you're checking. The text in quotes is a plain-English description of what should happen. When the test runs, you'll see this exact text next to a ✓ or ✗.

Good it descriptions read like punch list items:

• ✓ calculates a basic estimate with default markup
• ✓ applies custom markup percentage
• ✓ handles zero square footage
• ✗ handles negative values gracefully

You can tell exactly what's working and what's not without reading a single line of code.

The expect Assertions

expect(result.materials).toBe(3500);

This is the actual check. It reads almost like English: "I expect the materials result to be 3500." If result.materials is anything other than 3500, this test fails.

Common matchers you'll see AI use:

• .toBe(value) — exact match (like measuring a board: it's either 8 feet or it's not)
• .toEqual(object) — deep comparison (checks that two objects have the same contents)
• .toHaveProperty('name') — checks if a field exists (does the estimate include a markup line?)
• .toBeGreaterThan(number) — checks if something is above a threshold
• .toBeTruthy() — checks that the value isn't empty, null, or zero
• .toThrow() — checks that the function properly rejects bad input

You don't need to memorize these. When AI writes tests, it picks the right matcher. Your job is recognizing what the assertion is checking — and that's usually obvious from the description in the it block above it.

What AI Gets Wrong About Vitest

AI is great at writing Vitest tests. But it makes a handful of predictable mistakes. Knowing these saves you from a frustrating debugging session.

1. Missing the Vitest Dependency

AI writes the test file but forgets to tell you to install Vitest. You run the test and get:

Error: Cannot find module 'vitest'

The fix: Run npm install --save-dev vitest in your project folder. This adds Vitest to your project. If you're not sure what --save-dev means, check out our guide on what npm does.

2. Mixing Up Jest and Vitest Imports

Sometimes AI writes Vitest tests but uses Jest-style globals — meaning it skips the import line entirely:

// ❌ Missing import — this is Jest-style, not Vitest
describe('calculateEstimate', () => {
  it('should work', () => {
    expect(true).toBe(true);
  });
});

The fix: Add the import at the top: import { describe, it, expect } from 'vitest';

Or — and this is the easier option — add globals: true to your Vitest config, which makes Vitest behave like Jest. But know that this is a compatibility crutch, not the standard approach.

3. Wrong Config File

AI creates a jest.config.js when it should have created a vitest.config.ts. Or it creates the Vitest config but puts Jest-style options in it. If your tests aren't running, check which config file exists in your project root:

• vitest.config.ts → you're using Vitest
• jest.config.js → you're using Jest
• Both exist → that's a problem. Pick one and delete the other.

4. Forgetting the Test Script in package.json

AI writes the test file but doesn't update your package.json to include a test command. You run npm test and get an error. Check that your package.json includes:

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest"
  }
}

5. Import Path Mismatches

AI puts the test file in the wrong folder or uses the wrong relative path to import your function. You'll see:

Error: Failed to resolve import '../estimate' from 'src/utils/__tests__/estimate.test.ts'

The fix: Check where the test file is relative to the file it's testing. The ../estimate path means "go up one folder, then find estimate." If AI put the test file in a different location than it assumed, the path won't line up. Tell AI: "The test file is at [location] and the source file is at [location] — fix the import path."

How to Debug Vitest with AI

The most important skill isn't writing tests — it's reading the output when something fails. Here's what Vitest output actually looks like, and what to do with it.

The Happy Path: All Tests Pass

 ✓ src/utils/__tests__/estimate.test.ts (5 tests) 12ms
   ✓ calculateEstimate > calculates a basic estimate with default markup
   ✓ calculateEstimate > applies custom markup percentage
   ✓ calculateEstimate > handles zero square footage
   ✓ calculateEstimate > handles large projects
   ✓ calculateEstimate > returns all four cost components

 Test Files  1 passed (1)
      Tests  5 passed (5)
   Start at  14:32:07
   Duration  245ms

Green checkmarks, all passing, took less than a second. This is your final inspection where everything checks out. Ship it.

The Failure Case: Something's Wrong

 ✗ src/utils/__tests__/estimate.test.ts (1 failed | 4 passed)
   ✓ calculateEstimate > calculates a basic estimate with default markup
   ✗ calculateEstimate > applies custom markup percentage

   FAIL  calculateEstimate > applies custom markup percentage
   AssertionError: expected 3250 to be 3900

   - Expected: 3900
   + Received: 3250

    at src/utils/__tests__/estimate.test.ts:14:27

Here's what to read:

1. Which test failed — "applies custom markup percentage" (the plain-English name you saw earlier)
2. What was expected vs. what happened — the test expected 3900 but got 3250
3. Where it failed — line 14 of the test file

Now here's the key insight: the test might be right, or the code might be right — but they can't both be right. Either the estimate function has a bug (calculating wrong), or the test has a wrong expected value. This is where you use your domain knowledge.

For this example, you know the estimate: 500 sq ft × $4.00 material + 500 × $2.50 labor = $2,000 + $1,250 = $3,250, plus 20% markup = $3,900. So the expected value of $3,900 is correct — meaning the code has the bug, not the test.

Feeding Errors Back to AI

This is the vibe coder's superpower. Copy the failure output and paste it right back into your AI conversation:

Notice what you did there: you told AI which answer is right. That's critical. Without your domain knowledge — knowing what a 20% markup on a $3,250 subtotal should be — AI has to guess whether the test or the code is wrong. Your construction experience just became a debugging tool.

For more strategies on this workflow, see our full guide on how to debug AI-generated code.

Watch Mode: The Live Inspector

Run npx vitest (without the run flag) and Vitest enters watch mode. It stays running in your terminal and re-executes tests every time you save a file. This is like having an inspector standing in the room while you work — every time you make a change, they immediately check it.

Watch mode is especially powerful during the "fix the bug → re-test → fix again" loop. You don't have to keep typing the run command. Just save the file and look at the terminal.

Why Vitest Instead of Jest?

You might be wondering: if Vitest and Jest look almost identical, why does a new tool exist? Here's the practical difference that matters to you.

Speed. On a typical project with 200 tests, Jest might take 8-12 seconds. Vitest runs the same tests in 2-3 seconds. That might not sound like much, but when you're in a debug loop running tests 50 times an hour, it adds up. Vitest achieves this by reusing Vite's build system instead of building its own from scratch.

Zero config with Vite projects. If you scaffolded your project with npm create vite@latest — which is what AI increasingly does when you say "create a new React app" — then Vitest already knows your project structure, your TypeScript settings, your path aliases, everything. You don't need a separate config file. Jest, in the same situation, would need a config file to understand all of that.

Modern by default. Vitest natively supports ES modules, TypeScript, and JSX without plugins or transforms. Jest can do all of this too, but it needs Babel or ts-jest configured. That configuration is where things break — and where AI-generated test setups most often fail.

The bottom line: if your project uses Vite, use Vitest. If your project doesn't use Vite (or you're on an older codebase), Jest is still the right choice. AI generally makes this decision correctly based on your project's config files.

Quick Reference: Vitest Commands You'll Actually Use

What to Learn Next

Now that you understand what Vitest is and how to work with AI-generated tests, here are the natural next steps:

• What Is Testing? The big-picture guide to why testing matters and what types exist — unit tests, integration tests, end-to-end tests, and when each one matters for your project.
• What Is Jest? The original JavaScript testing framework. If your project doesn't use Vite, Jest is probably what AI will reach for. Understand both so you're never confused.
• What Is npm? The tool that installs Vitest (and everything else) in your project. Understanding npm means understanding how all these tools get into your project in the first place.
• How to Debug AI-Generated Code The complete workflow for when AI's code doesn't work — including how to use test output as a debugging conversation starter.
• What Is Playwright? Vitest handles unit tests (testing individual functions). Playwright handles end-to-end tests (testing your whole app in a real browser). Together, they cover the full testing spectrum.
• What Is package.json? The file that ties everything together — your test scripts, your dependencies, your project identity. Vitest lives here.