vitest-environment-stencil

A custom Vitest environment for testing Stencil components.

This package enables the environment: 'stencil' option in your Vitest configuration, providing a DOM environment optimized for Stencil component testing.

Installation

npm install --save-dev vitest-environment-stencil @stencil/vitest vitest

Usage

In your Vitest config, set the environment to stencil:

// vitest.config.ts
import { defineVitestConfig } from '@stencil/vitest/config';

export default defineVitestConfig({
  stencilConfig: './stencil.config.ts',
  test: {
    include: ['src/**/*.spec.{ts,tsx}'],
    environment: 'stencil',
  },
});

Per-File Environment

You can also set the environment on a per-file basis using a comment directive at the top of your test file:

// @vitest-environment stencil
import { render, h } from '@stencil/vitest';

describe('my-component', () => {
  // ...
});

This is useful when you have a mix of test types and only some need the Stencil environment.

Environment Options

You can configure the underlying DOM implementation using environmentOptions:

export default defineVitestConfig({
  stencilConfig: './stencil.config.ts',
  test: {
    environment: 'stencil',
    environmentOptions: {
      stencil: {
        // Choose your DOM implementation:
        // 'mock-doc' (default) - Stencil's built-in mock DOM
        // 'jsdom' - Full jsdom implementation (requires jsdom package)
        // 'happy-dom' - Fast happy-dom implementation (requires happy-dom package)
        domEnvironment: 'mock-doc',
      },
    },
  },
});

Documentation

For full documentation, including testing APIs, matchers, and examples, see the @stencil/vitest README.

vitest-environment-stencil

Installation

Usage

Per-File Environment

Environment Options

Documentation

License

Current Tags

46 Versions