Настройка конфигурационных файлов проекта

Конфигурация тестового окружения начинается с правильной установки и согласования зависимостей. Для тестирования Vue-компонентов в JavaScript обычно используется связка Vue Test Utils и тест-раннер (чаще всего Jest или Vitest).

Типовой набор зависимостей для проекта на Vue 3:

  • @vue/test-utils
  • vitest или jest
  • jsdom
  • @testing-library/jest-dom (опционально)
  • vue-jest или @vitejs/plugin-vue (в зависимости от сборщика)

Установка через npm:

npm install -D @vue/test-utils vitest jsdom

Для проектов на Vite предпочтительнее Vitest, так как он использует ту же конфигурацию и плагинную систему.

Конфигурационный файл тест-раннера

Vitest: vitest.config.js

Конфигурация Vitest максимально близка к Vite и обычно выглядит следующим образом:

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

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './tests/setup.js',
    include: ['**/*.spec.js']
  }
})

Ключевые параметры:

  • environment — jsdom необходим для работы с DOM API
  • globals — позволяет использовать describe, it, expect без импортов
  • setupFiles — файл инициализации тестового окружения
  • include — маска поиска тестовых файлов

Jest: jest.config.js

Для Jest конфигурация более подробная:

module.exports = {
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest',
    '^.+\\.js$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  setupFilesAfterEnv: ['<rootDir>/tests/setup.js']
}

Особое внимание уделяется:

  • transform — обработка .vue файлов
  • moduleNameMapper — алиасы путей
  • setupFilesAfterEnv — подключение глобальных хуков и матчеров

Файл инициализации тестов (setup.js)

Файл инициализации используется для глобальной конфигурации Vue Test Utils и тестовой среды.

Пример tests/setup.js:

import { config } from '@vue/test-utils'
import '@testing-library/jest-dom'

Через объект config можно задать глобальные параметры:

config.global.stubs = {
  transition: false,
  teleport: true
}

config.global.mocks = {
  $t: (key) => key
}

Основные сценарии использования:

  • заглушки для <transition> и <teleport>
  • глобальные моки $router, $route, $t
  • единая настройка для всех тестов

Глобальная конфигурация Vue Test Utils

Vue Test Utils предоставляет объект config, влияющий на поведение всех mount и shallowMount.

Глобальные компоненты

config.global.components = {
  BaseButton,
  Icon
}

Позволяет не регистрировать базовые компоненты в каждом тесте.

Глобальные директивы

config.global.directives = {
  focus: {
    mounted(el) {
      el.focus()
    }
  }
}

Полезно для директив, активно использующих DOM.

Заглушки компонентов

config.global.stubs = {
  RouterLink: true,
  RouterView: true
}

Снижает сложность тестов и изолирует компонент от роутинга.

Алиасы и разрешение путей

Для корректной работы импортов в тестах алиасы должны совпадать с конфигурацией сборщика.

Vite: vite.config.js

import { resolve } from 'path'

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

Vitest автоматически использует эту конфигурацию.

Jest: дублирование алиасов

moduleNameMapper: {
  '^@/(.*)$': '<rootDir>/src/$1'
}

Несоответствие алиасов приводит к ошибкам импорта и нестабильным тестам.

Моки браузерных API

jsdom не реализует все браузерные возможности. Часто требуется ручное определение API.

Пример для ResizeObserver:

global.ResizeObserver = class {
  observe() {}
  unobserve() {}
  disconnect() {}
}

Для matchMedia:

window.matchMedia = () => ({
  matches: false,
  addListener: () => {},
  removeListener: () => {}
})

Такие моки размещаются в setup.js.

Работа с окружением и переменными

Тесты часто используют переменные окружения.

Vitest

process.env.API_URL = 'http://localhost'

или через .env.test:

VITE_API_URL=http://localhost

Vitest автоматически подхватывает файлы окружения с соответствующим режимом.

Jest

process.env.NODE_ENV = 'test'

или через setupFiles.

Настройка покрытия кода

Vitest

test: {
  coverage: {
    reporter: ['text', 'html'],
    exclude: ['node_modules/', 'tests/']
  }
}

Jest

collectCoverage: true,
collectCoverageFrom: [
  'src/**/*.{js,vue}',
  '!src/main.js'
]

Покрытие позволяет контролировать качество тестов и выявлять неиспользуемый код.

Разделение конфигураций

Для крупных проектов конфигурацию целесообразно разбивать:

  • vitest.config.js — базовая
  • vitest.config.unit.js — юнит-тесты
  • vitest.config.e2e.js — e2e

Пример:

export default defineConfig({
  test: {
    include: ['src/**/*.spec.js']
  }
})

Это упрощает поддержку и масштабирование тестовой инфраструктуры.

Типизация и поддержка IDE

Для улучшения автодополнения в Vitest:

/// <reference types="vitest" />

или в tsconfig.json:

{
  "types": ["vitest/globals"]
}

Vue Test Utils также предоставляет типы для wrapper, mount и VueWrapper, что особенно важно при тестировании Composition API.

Общие принципы конфигурации

  • конфигурация тестов должна быть детерминированной
  • глобальные моки минимальны и предсказуемы
  • алиасы и окружение синхронизированы со сборщиком
  • повторяющаяся логика выносится в setup.js
  • тесты не зависят от реального браузера или сети
Оглавление