@scaffit/vitest

Vitest unit testing setup with framework-specific configurations for Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js projects.

Features

• Multi-framework support - Automatically detects your project framework
• Framework-specific configurations - Tailored Vitest configs for each framework
• Test environment options - Node.js, jsdom, or Happy DOM
• Coverage reporting - Optional V8 coverage with HTML reports
• Interactive UI - Optional Vitest UI for better testing experience
• Alias resolution - Framework-specific path aliases configured

Installation

Option 1: Using Scaffit CLI (Recommended)

# Add Vitest scaffold (no installation needed!)
npx scaffit add vitest

Alternative: Global Installation

# Install CLI globally
npm install -g scaffit

# Add Vitest scaffold
scaffit add vitest

Option 2: Direct npm package usage

# Install scaffold directly
npm install @scaffit/vitest

# Use in your code
import { setupVitest, previewVitest } from '@scaffit/vitest';

// Setup Vitest with custom options
const result = await setupVitest({
  addTestScripts: true,
  addCoverage: true,
  addUI: false,
  projectRoot: './my-project'
});

// Preview changes before applying
const preview = await previewVitest({
  addTestScripts: true,
  addCoverage: true
});

Note: Both approaches require @scaffit/core to be installed (automatically handled).

Framework Support

Next.js

• Path aliases: @, @/components, @/lib, @/utils
• Testing utilities: @testing-library/react, @testing-library/jest-dom

React (Vite/CRA)

• Path aliases: @, @/components, @/lib
• Testing utilities: @testing-library/react, @testing-library/jest-dom

Vue

• Path aliases: @, @/components, @/composables
• Testing utilities: @vue/test-utils

Angular

• Path aliases: @, @/shared, @/core
• Testing utilities: @angular/testing

Svelte

• Path aliases: @, @/lib, @/components
• Testing utilities: @testing-library/svelte

Express/Fastify/Node.js

• Path aliases: @, @/utils, @/services
• Testing utilities: supertest

Configuration

The scaffold creates a vitest.config.ts file with framework-specific settings:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'node', // or 'jsdom', 'happy-dom'
    globals: true,
    setupFiles: ['./test/setup.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      exclude: ['node_modules/', 'dist/', 'coverage/']
    }
  },
  resolve: {
    alias: {
      '@': './src',
      // Framework-specific aliases
    }
  }
});

Package.json Scripts

The scaffold adds these scripts to your package.json:

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest --coverage"
  }
}

Test Environment Options

• Node.js (default) - For server-side testing
• jsdom - For DOM testing in Node.js
• Happy DOM - Alternative DOM implementation

Optional Features

• Coverage Reporting - V8 coverage with HTML reports
• Vitest UI - Interactive testing interface
• Framework-specific testing utilities - Automatically installed based on your framework

Usage

After installation:

1. Create your first test file:

   // test/example.test.ts
   import { describe, it, expect } from 'vitest';
      
   describe('Example', () => {
     it('should work', () => {
       expect(1 + 1).toBe(2);
     });
   });

2. Run tests:

   npm test

3. Run tests with coverage:

   npm run test:coverage

4. Open interactive UI:

   npm run test:ui

License

MIT