Vitest

Vitest

Set up Vitest testing in any project — detects project type (Cloudflare Workers, React, Node), generates vitest.config.ts, test setup, utilities, and

Category: development Source: jezweb/claude-skills

What Is Vitest?

Vitest is a next-generation testing framework designed for modern JavaScript and TypeScript projects. Built with performance and developer experience in mind, Vitest offers fast, isolated test execution and first-class TypeScript support. Its API is highly compatible with Jest, making it an attractive choice for both greenfield projects and legacy codebases looking to migrate to a faster, more maintainable testing solution.

The Claude Code skill "Vitest" automates the process of integrating Vitest into your project. It intelligently detects your project type—such as Cloudflare Workers, React applications, or Node.js libraries—and scaffolds a tailored testing setup, including configuration files, test utilities, and sample tests. This enables teams to adopt best-in-class testing practices with minimal friction.

Why Use Vitest?

There are several compelling reasons to adopt Vitest in your development workflow:

  • Speed: Vitest leverages worker threads and Vite’s module graph for near-instant test runs, significantly reducing feedback loops compared to traditional test runners.
  • TypeScript Native: Direct support for TypeScript ensures a seamless developer experience, including type-safe test code and configuration.
  • Compatibility: Its Jest-like API lowers the barrier for migration, allowing teams to port existing tests with minimal changes.
  • Flexible Configuration: Vitest is highly configurable, supporting a broad range of usage scenarios, from browser-based tests to edge runtimes like Cloudflare Workers.
  • Advanced Features: Snapshot testing, rich mocking APIs, code coverage reports, and integration with modern build tools are built-in.

Using the Claude Code skill, you can rapidly bootstrap Vitest in your projects without manually handling configuration nuances, further streamlining the adoption process.

How to Get Started

With the Claude Code “Vitest” skill, setting up a robust testing environment is almost entirely automated. Here’s how the process works:

  1. Trigger the Skill: Use commands such as set up vitest, configure vitest, or add unit tests within Claude Code. The skill begins by scanning your project.
  2. Project Detection: It analyzes key files (e.g., package.json, tsconfig.json, vite.config.ts, wrangler.toml, and source directory structure) to determine the project type and requirements.
  3. Configuration Generation: Based on the detected environment, the skill generates a vitest.config.ts file, ensuring the correct test environment (e.g., jsdom for React, miniflare for Cloudflare Workers).
  4. Scaffolding: The skill creates a test setup file (e.g., setupTests.ts), utility files for common testing patterns, and a sample test (e.g., src/__tests__/example.test.ts).
  5. Package Scripts and TypeScript Updates: It updates package.json to add test scripts, and modifies tsconfig.json if necessary to ensure compatibility.

Example: Sample vitest.config.ts for a React Project

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    coverage: {
      reporter: ['text', 'html'],
      include: ['src/**/*.ts', 'src/**/*.tsx'],
    },
  },
});

Example: Sample Test File

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

describe('math utils', () => {
  it('adds numbers correctly', () => {
    expect(1 + 2).toBe(3);
  });
});

Key Features

The Claude Code “Vitest” skill provides a comprehensive, automated integration tailored to your project’s stack:

  • Automatic Project Type Detection: Through smart analysis of configuration and source files, the skill determines whether your project is a Cloudflare Worker, React app, Node.js library, or another supported type.
  • Custom Configuration Generation: The generated vitest.config.ts is tailored to your runtime and framework, with correct environment settings, coverage options, and integrations (e.g., Vite extensions for React).
  • Test Scaffolding: Starter test files and utility scripts are created, so you can begin writing meaningful tests immediately.
  • Mocking and Utilities: Includes examples and helpers for common mocking patterns, making it easy to test code with external dependencies.
  • Jest Migration Assistance: If a jest.config.* file is detected, the skill can assist in migrating test files and configuration to Vitest standards.
  • Coverage and Workspace Setup: Generates sensible defaults for coverage reporting and multi-package workspace support where needed.

Best Practices

  • Organize Tests Closely: Place test files alongside the source code (src/foo.ts → src/foo.test.ts) or in a dedicated __tests__ directory to simplify discovery and maintenance.
  • Leverage Setup Files: Use the generated setup file for global mocks, polyfills, or configuration shared across tests.
  • Adopt Isolated Testing: Ensure each test is independent—Vitest runs tests in isolation by default, but avoid shared mutable state.
  • Utilize Coverage Reports: Regularly review coverage output to identify untested code paths.
  • Migrate Incrementally: When transitioning from Jest, migrate one module or package at a time, using the skill’s migration helpers to minimize disruption.

Important Notes

  • Existing Configuration: If your project already contains a vitest.config.ts, the skill will update or supplement it rather than overwrite, preserving custom settings.
  • Vite Integration: For projects using Vite, the generated configuration will extend your existing vite.config.ts to ensure compatibility.
  • Cloudflare Workers Support: Specialized configuration is applied for edge runtimes, including integration with Miniflare for local testing.
  • Dependency Installation: The skill assumes you have an up-to-date Node.js environment and will prompt to install required dependencies if missing.
  • Manual Review Recommended: While the skill automates setup, always review the generated files and scripts to ensure they meet your project’s specific needs and security standards.

By leveraging the Claude Code “Vitest” skill, teams can efficiently adopt a modern, high-performance testing workflow tailored to their stack, reducing setup overhead and enabling rapid, reliable test-driven development.