Vitest настройка

Vitest — это современный инструмент для юнит-тестирования в экосистеме JavaScript и TypeScript, который обеспечивает высокую скорость выполнения тестов и интеграцию с современными фреймворками. Для проектов с Naive UI, построенных на Vue 3, настройка Vitest требует внимания к совместимости с компонентной системой и стилями библиотеки.

Установка зависимостей

Для начала необходимо установить основные пакеты для работы с Vitest:

npm install --save-dev vitest @vitejs/plugin-vue jsdom
  • vitest — сам тестовый раннер.
  • @vitejs/plugin-vue — плагин для поддержки Vue 3 в Vite, необходим, чтобы корректно обрабатывать .vue файлы.
  • jsdom — эмулятор браузерного окружения, позволяющий тестировать DOM-операции вне браузера.

Если проект использует TypeScript, рекомендуется дополнительно установить типы:

npm install --save-dev @types/jest @vue/test-utils

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

Vitest интегрируется через конфигурацию Vite. В корне проекта создается или редактируется файл vite.config.ts:

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

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './vitest.setup.ts',
    coverage: {
      provider: 'istanbul',
      reporter: ['text', 'lcov']
    }
  }
})

Ключевые моменты:

  • globals: true позволяет использовать глобальные функции тестирования (describe, it, expect) без импорта в каждом файле.
  • environment: 'jsdom' необходимо для корректной работы компонентов Naive UI, которые взаимодействуют с DOM.
  • setupFiles указывает на файл, где будут производиться общие настройки для тестов, включая глобальный монтинг компонентов.
  • coverage настраивает сбор покрытия кода.

Настройка глобальных тестовых утилит

Создается файл vitest.setup.ts:

import { config } from '@vue/test-utils'
import { createApp } from 'vue'
import NaiveUI from 'naive-ui'

// Подключение Naive UI глобально для всех тестов
const app = createApp({})
app.use(NaiveUI)
config.global.plugins = [app]

Здесь создается глобальный Vue-приложение, куда подключается Naive UI, чтобы компоненты библиотеки были доступны в любом тесте.

Также в vitest.setup.ts можно настроить мокинг функций, глобальные стили или работу с локальным хранилищем.

Пример теста компонента Naive UI

Создадим простой тест для кнопки n-button:

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import { NButton } from 'naive-ui'

describe('NButton', () => {
  it('рендерится с правильным текстом', () => {
    const wrapper = mount(NButton, {
      props: { type: 'primary' },
      slots: { default: 'Кликни меня' }
    })

    expect(wrapper.text()).toBe('Кликни меня')
    expect(wrapper.classes()).toContain('n-button--primary')
  })

  it('вызывает обработчик при клике', async () => {
    const onCl ick = vi.fn()
    const wrapper = mount(NButton, {
      props: { onClick }
    })

    await wrapper.trigger('click')
    expect(onClick).toHaveBeenCalled()
  })
})

Обратите внимание:

  • Использование vi.fn() вместо jest.fn() для моков функций.
  • Монтирование компонентов через mount из @vue/test-utils.
  • Проверка текстового содержимого и классов CSS для компонентов Naive UI.

Тестирование асинхронных компонентов и реактивных данных

Naive UI активно использует реактивные данные через Vue Composition API. Для корректного тестирования асинхронного поведения используется nextTick или flushPromises:

import { mount } from '@vue/test-utils'
import { ref, nextTick } from 'vue'
import { describe, it, expect } from 'vitest'
import { NInput } from 'naive-ui'

describe('NInput', () => {
  it('обновляет значение при вводе', async () => {
    const value = ref('')
    const wrapper = mount(NInput, {
      modelValue: value.value,
      'onUpdate:modelValue': (v: string) => (value.value = v)
    })

    await wrapper.setValue('Тестовое значение')
    await nextTick()
    expect(value.value).toBe('Тестовое значение')
  })
})

Использование ref позволяет следить за реактивными изменениями, а nextTick гарантирует, что DOM обновился перед проверкой.

Интеграция с CI/CD

Vitest легко интегрируется с CI/CD. Для запуска тестов в GitHub Actions можно использовать следующий workflow:

name: Test

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm install
      - run: npx vitest run --coverage

Флаг --coverage собирает информацию о покрытии кода и выводит отчеты в консоль и файлы.

Оглавление