Vitest Configuration

20.1.1. vitest.config.ts

Create a vitest.config.ts file in the project root and use the following as the base configuration.

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },

  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.ts'],
    include: ['src/**/*.{test,spec}.{ts,tsx}'],
    exclude: ['node_modules', 'dist', 'e2e'],
  },
})

• Setting globals: true allows using describe, it, expect, and other globals without importing them.
• environment must be set to either jsdom or happy-dom.
• The global setup file path is specified in setupFiles.
• The include pattern targets only *.test.ts or *.spec.ts files.

---

20.1.2. Test Environment

Choose either jsdom or happy-dom based on the project requirements.

Item	jsdom	happy-dom
Execution Speed	Moderate	Fast (approximately 2-3x faster than jsdom)
DOM Compatibility	High (close to browser standards)	Moderate (some APIs unsupported)
Community Ecosystem	Broad	Growing
Recommended Use Case	When precise DOM validation is required	When fast feedback is required

• Use jsdom when precise browser API testing such as DOM event bubbling or window.getComputedStyle is required.
• Use happy-dom for simple rendering validation tests to improve execution speed.
• The TQS default is jsdom.

---

20.1.3. Setup File

Initialize global mocks and test utilities in the vitest.setup.ts file.

// vitest.setup.ts
import { config } from '@vue/test-utils'

// Global component stub configuration
config.global.stubs = {
  RouterLink: true,
  RouterView: true,
}

// Global mock configuration
vi.stubGlobal('matchMedia', vi.fn(() => ({
  matches: false,
  addListener: vi.fn(),
  removeListener: vi.fn(),
})))

// IntersectionObserver mock
vi.stubGlobal('IntersectionObserver', vi.fn(() => ({
  observe: vi.fn(),
  unobserve: vi.fn(),
  disconnect: vi.fn(),
})))

• Use config.global from @vue/test-utils to configure plugins, stubs, and mocks that apply to all tests.
• Browser-specific APIs (matchMedia, IntersectionObserver, etc.) must be registered as global mocks.

---

20.1.4. Execution Commands

Register the following commands in the scripts section of package.json.

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

Command	Description
yarn test	Runs all tests once
yarn test:watch	Automatically re-runs related tests when file changes are detected
yarn test:coverage	Runs tests with coverage report
yarn test:ui	Launches Vitest UI in the browser

• During development, yarn test:watch must be kept running at all times to ensure fast feedback.
• In CI environments, use yarn test for a single execution followed by exit.
• Coverage measurement is performed with yarn test:coverage, and the detailed criteria follow Section 20.4.