@woby/vite-plugin-test

A Vite plugin for handling test files in development server.

Repository: https://github.com/wobyjs/vite-plugin-test

Features

• Serves test.html with combined component tests
• Automatically finds and processes HTML test files using configurable patterns
• Provides global variable with test file paths
• Works with Vite development server
• Configurable test file inclusion/exclusion patterns via chk.json or plugin options
• Automatically excludes generated index.test.ts file

Installation

npm install @woby/vite-plugin-test

Usage

import { defineConfig } from 'vite'
import testPlugin from '@woby/vite-plugin-test'

export default defineConfig({
  plugins: [
    testPlugin()
  ]
})

Configuration

The plugin accepts an optional configuration object:

testPlugin({
  // Path to test.html file
  testHtmlPath: './test.html',
  
  // Patterns to include test files (TypeScript/JavaScript)
  include: ['./src/**/*.test.{ts,tsx}', './src/**/*.spec.{ts,tsx}'],
  
  // Patterns to exclude test files (TypeScript/JavaScript)
  exclude: [],
  
  // Patterns to include HTML test files
  htmlInclude: ['./**/*.test.{htm,html}', './**/*.spec.{htm,html}'],
  
  // Patterns to exclude HTML test files
  htmlExclude: []
})

Test File Patterns Configuration

You can configure which test files to include or exclude by creating a chk.json file in your project root:

{
  "include": [
    "./src/**/*.test.{ts,tsx}",
    "./src/**/*.spec.{ts,tsx}"
  ],
  "exclude": [
    "./src/**/*.skip.*",
    "./src/**/__tests__/fixtures/**",
    "./index.test.ts",
    "./*/index.test.ts"
  ],
  "htmlInclude": [
    "./**/*.test.{htm,html}",
    "./**/*.spec.{htm,html}"
  ],
  "htmlExclude": [
    "./**/*.skip.{htm,html}"
  ]
}

Configuration Priority

The plugin uses configuration in the following priority (highest to lowest):

1. Plugin options parameters
2. chk.json configuration file
3. Default patterns

If no chk.json file is found and no options are provided, the plugin will use the default patterns:

• Include: ./**/*.test.{ts,tsx} and ./**/*.spec.*
• Exclude: ./index.test.ts and ./*/index.test.ts (automatically excluded)
• HTML Include: ./**/*.test.{htm,html} and ./**/*.spec.{htm,html}
• HTML Exclude: none by default

Note: The plugin automatically generates an index.test.ts file to aggregate all test files. This file is automatically excluded from the test discovery to prevent circular references.

How it works

1. The plugin looks for a test.html file in your project root
2. If the file contains a `{combine} placeholder, it will:
   • Find all HTML files matching the htmlInclude patterns (excluding those matching htmlExclude)
   • Extract the body content from each file (or the entire file if no body tag)
   • Combine them into a single HTML output
   • Replace the {combine} placeholder with the combined content
3. Makes test file paths available as a global variable __TEST_FILES__