Vitest Configuration Skill

This skill provides vitest.config.ts templates and validation logic for Vitest test configuration.

Purpose

Manage vitest.config.ts configuration to:

• Configure test environment based on package type
• Set up test setup files (frontend only)
• Configure coverage reporting
• Add required dependencies and scripts

Usage

This skill is invoked by the vitest-agent when:

• Creating new vitest.config.ts files
• Auditing existing Vitest configurations
• Validating Vitest configs against standards

Templates

Templates are located at:

templates/vitest.config.ts.template         # Frontend (React apps, components) - factory pattern
templates/vitest-backend.config.ts.template # Backend (libraries, APIs, contracts, database)
templates/vitest.setup.ts.template          # Setup file (frontend only) - DEPRECATED, use shared setup

Package-Type Specific Configs

The @metasaver/core-vitest-config package exports package-type specific configurations:

The 5 Vitest Standards

Standard 1: Use Package-Type Specific Config

React apps (portals): Use factory pattern with vite.config.ts merging

import { createReactAppConfig } from "@metasaver/core-vitest-config/react-app";
import viteConfig from "./vite.config";

export default createReactAppConfig(viteConfig, {
  // Optional overrides
  setupFiles: ["./vitest.setup.ts"],
});

React libraries (component packages):

import { createReactLibraryConfig } from "@metasaver/core-vitest-config/react-library";
import viteConfig from "./vite.config";

export default createReactLibraryConfig(viteConfig);

Node libraries (utility packages):

import nodeLibraryConfig from "@metasaver/core-vitest-config/node-library";

export default nodeLibraryConfig;

Node services (REST APIs):

import nodeServiceConfig from "@metasaver/core-vitest-config/node-service";

export default nodeServiceConfig;

Contracts (Zod schemas):

import contractsConfig from "@metasaver/core-vitest-config/contracts";

export default contractsConfig;

Database (Prisma):

import databaseConfig from "@metasaver/core-vitest-config/database";

export default databaseConfig;

Standard 2: Test Configuration (by package type)

Standard 3: Setup File (frontend only)

Use shared setup from vitest-config package:

// Configured automatically by factory pattern
setupFiles: ["@metasaver/core-vitest-config/setup/jest-dom"];

The shared setup imports @testing-library/jest-dom for DOM assertions.

DEPRECATED: Creating local ./vitest.setup.ts files. Use the shared setup instead.

Backend packages do NOT need a setup file.

Standard 4: Required Dependencies (by package type)

Frontend packages:

{
  "devDependencies": {
    "vitest": "^3.2.4",
    "@vitest/coverage-v8": "^3.2.4",
    "@vitest/ui": "^3.2.4",
    "@testing-library/react": "^16.0.0",
    "@testing-library/jest-dom": "^6.0.0",
    "@metasaver/core-vitest-config": "workspace:*",
    "jsdom": "^26.0.0"
  }
}

Backend packages:

{
  "devDependencies": {
    "vitest": "^3.2.4",
    "@vitest/coverage-v8": "^3.2.4",
    "@metasaver/core-vitest-config": "workspace:*"
  }
}

Service packages (additional):

{
  "devDependencies": {
    "supertest": "^7.0.0",
    "@types/supertest": "^6.0.3"
  }
}

Standard 5: Required npm Scripts (by package type)

All packages:

{
  "scripts": {
    "test:unit": "vitest run",
    "test:watch": "vitest",
    "test:coverage": "vitest run --coverage"
  }
}

Frontend packages (additional):

{
  "scripts": {
    "test:ui": "vitest --ui"
  }
}

Package Type Rules Summary

Validation

To validate a vitest.config.ts file:

1. Determine package type (frontend vs backend)
2. Check vitest.config.ts exists
3. For frontend: verify factory pattern usage with vite.config.ts
4. For backend: verify package-type specific config usage
5. Check environment matches package type
6. For frontend: verify shared setup file reference
7. Check required dependencies for package type
8. Verify npm scripts (test:unit, test:watch, test:coverage, + test:ui for frontend)
9. Report violations

Repository Type Considerations

• Consumer Repos: Must strictly follow all 5 standards unless exception declared
• Library Repos: May have custom test configuration for component library testing

Exception Declaration

Consumer repos may declare exceptions in package.json:

{
  "metasaver": {
    "exceptions": {
      "vitest-config": {
        "type": "custom-test-setup",
        "reason": "Requires custom test environment setup for specialized testing"
      }
    }
  }
}

Best Practices

1. Place vitest.config.ts at workspace root
2. Frontend: use factory pattern (createReactAppConfig/createReactLibraryConfig)
3. Backend: use package-type specific config (node-library, node-service, contracts, etc.)
4. Frontend: use shared setup file from vitest-config package
5. Use correct config for package type
6. Re-audit after making changes

Integration

This skill integrates with:

• Repository type provided via scope parameter. If not provided, use /skill scope-check
• /skill audit-workflow - Bi-directional comparison workflow
• /skill remediation-options - Conform/Update/Ignore choices
• vite-agent - Ensure vite.config.ts exists for frontend packages
• package-scripts-agent - Ensure test scripts exist