Установка Vue Test Utils

Vue Test Utils (VTU) — официальная библиотека для тестирования компонентов Vue.js, предоставляющая инструменты для рендеринга компонентов, взаимодействия с ними и проверки их состояния. Основной задачей является изоляция компонентов и возможность писать модульные тесты, покрывающие логику, разметку и реактивное поведение.

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

Vue Test Utils поддерживает Vue 2 и Vue 3, и для каждой версии существуют отдельные пакеты:

  • Для Vue 3: @vue/test-utils
  • Для Vue 2: @vue/test-utils@1 (последняя стабильная версия для Vue 2)

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

# Vue 3
npm install --save-dev @vue/test-utils

# Vue 2
npm install --save-dev @vue/test-utils@1

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

# Vue 3
yarn add --dev @vue/test-utils

# Vue 2
yarn add --dev @vue/test-utils@1

Интеграция с тестовыми раннерами

Vue Test Utils не предоставляет собственный тестовый раннер, поэтому обычно используется вместе с:

  • Jest — популярный выбор для модульного тестирования, поддерживающий мокинг, снапшоты и асинхронные проверки.
  • Vitest — современный тестовый фреймворк, полностью совместимый с Vue 3 и Vite.
  • Mocha + Chai — альтернативный стек для тех, кто предпочитает классический подход.

Пример установки с Jest:

npm install --save-dev jest @vue/vue3-jest babel-jest

Для Vue 2 используется соответствующий трансформер vue-jest версии 3 или 2 (в зависимости от Vue).

Настройка конфигурации Jest

В package.json или отдельном конфигурационном файле jest.config.js необходимо указать обработку .vue файлов через vue-jest:

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest',
    '^.+\\.js$': 'babel-jest'
  },
  testEnvironment: 'jsdom'
};

Для Vue 2:

transform: {
  '^.+\\.vue$': 'vue-jest',
  '^.+\\.js$': 'babel-jest'
}

jsdom эмулирует браузерное окружение, необходимое для рендеринга компонентов.

Подключение дополнительных утилит

Для удобного тестирования часто устанавливают следующие библиотеки:

  • @testing-library/jest-dom — предоставляет расширенные матчера для проверки DOM.
  • @vue/compiler-sfc — нужен для компиляции однофайловых компонентов .vue в тестовой среде.
npm install --save-dev @testing-library/jest-dom @vue/compiler-sfc

После установки @testing-library/jest-dom можно расширить Jest:

import '@testing-library/jest-dom';

Проверка установки

Создается минимальный компонент HelloWorld.vue:

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  props: ['msg']
};
</script>

И тест HelloWorld.spec.js:

import { mount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';

test('рендерит переданное сообщение', () => {
  const wrapper = mount(HelloWorld, {
    props: { msg: 'Привет, Vue!' }
  });
  expect(wrapper.text()).toBe('Привет, Vue!');
});

Запуск тестов через npm test или yarn test должен завершиться успешно.

Практические рекомендации

  • Изолированная установка: VTU лучше ставить в проект с локальными зависимостями, чтобы избежать конфликтов версий Vue.
  • Совместимость с Vue: проверять версию Vue перед установкой. Vue 2 и Vue 3 используют разные модули VTU.
  • Тестовое окружение: всегда использовать jsdom для имитации браузера. Без него рендеринг компонентов и манипуляции DOM будут невозможны.
  • Обновления: следить за релизами VTU, так как новые версии улучшают поддержку асинхронных функций и Composition API.

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

Оглавление