Vitest

Vitest is a community skill for testing JavaScript and TypeScript applications, covering unit testing, component testing, mocking, snapshot testing, and coverage reporting with a Vite-native testing framework for fast test execution.

What Is This?

Overview

Vitest provides guidance on writing and running tests using the Vitest testing framework that integrates natively with Vite projects. It covers unit testing that validates individual functions and modules with assertions, matchers, and test lifecycle hooks for setup and teardown, component testing that renders React or Vue components in a testing environment and verifies output and behavior, mocking that replaces modules, functions, and timers with controlled substitutes for isolated testing, snapshot testing that captures component output or data structures and compares them against stored baselines for regression detection, and coverage reporting that measures code path execution to identify untested branches and functions. The skill helps developers maintain high code quality with fast, Vite-powered test execution and comprehensive assertion capabilities.

Who Should Use This

This skill serves JavaScript and TypeScript developers writing unit and integration tests, frontend teams testing React or Vue components, and teams migrating from Jest to a Vite-native testing solution.

Why Use It?

Problems It Solves

Jest configuration in Vite projects requires separate transform pipelines that duplicate build settings. Test execution becomes increasingly slow as test suites grow without watch mode optimization. Mocking ES modules requires special configuration that differs from CommonJS mocking patterns. Component testing needs proper DOM environment setup that must match the application build configuration.

Core Highlights

Test runner executes tests with Vite-speed native module transforms. Mock system replaces modules, functions, and timers for isolated unit testing. Snapshot engine captures and compares rendered output for automated regression detection. Coverage reporter measures detailed code path execution percentages.

How to Use It?

Basic Usage

// math.test.ts
import { describe, it,
  expect, vi } from
  'vitest';
import { calculate }
  from './math';

describe('calculate', () => {
  it('adds numbers', () => {
    expect(
      calculate(2, 3, 'add')
    ).toBe(5);
  });

  it('throws on invalid\
 op', () => {
    expect(
      () => calculate(
        1, 2, 'invalid')
    ).toThrow(
      'Unknown operation');
  });

  it('mocks dependency',
    () => {
    const spy =
      vi.fn(() => 42);
    expect(spy()).toBe(42);
    expect(spy)
      .toHaveBeenCalled();
  });
});

Real-World Examples

// Component + module mock
import { describe, it,
  expect, vi } from
  'vitest';
import { render,
  screen } from
  '@testing-library/react';

vi.mock('./api', () => ({
  fetchUser: vi.fn()
    .mockResolvedValue({
      name: 'Alice',
      email: 'a@b.com'
    })
}));

import { UserCard }
  from './UserCard';

describe('UserCard', () => {
  it('displays user info',
    async () => {
    render(
      <UserCard id="1" />);

    expect(
      await screen
        .findByText('Alice')
    ).toBeDefined();

    expect(
      screen.getByText(
        'a@b.com')
    ).toBeDefined();
  });
});

Advanced Tips

Use vi.mock with factory functions for fine-grained control over module mock behavior. Enable inline snapshots for small assertions that are easier to review in code review. Configure workspace support to run different test configurations for different packages in a monorepo.

When to Use It?

Use Cases

Write unit tests for utility functions with comprehensive assertion coverage. Test React components with mocked API calls and user interaction simulation. Generate coverage reports to identify untested code paths before releases.

Related Topics

Vite, Jest, testing, TypeScript, React Testing Library, mocking, and code coverage.

Important Notes

Requirements

Node.js with vitest installed as a dev dependency alongside the project Vite configuration. Testing library packages such as @testing-library/react for component rendering and interaction testing. JSDOM or Happy DOM environment configured for component tests that require a browser-like DOM.

Usage Recommendations

Do: use the watch mode during development for instant feedback on test results as code changes. Mock external dependencies at the module level to keep tests isolated and fast. Structure tests with descriptive names that document expected behavior.

Don't: mock implementation details that make tests brittle to internal refactoring changes. Write snapshot tests for large outputs that are difficult to review meaningfully in pull requests. Skip coverage configuration since it identifies blind spots in the test suite.

Limitations

Vitest shares the Vite module resolution which may differ from production runtime behavior in edge cases. Browser-specific APIs not available in JSDOM require polyfills or browser-mode testing. Some Jest plugins and custom matchers may need adaptation for Vitest compatibility.