Основы тестирования

Тест — код, который проверяет другой код: вызывает функцию или выводит компонент и сравнивает результат с ожидаемым. Тесты запускаются одной командой и быстро показывают, что правка что-то сломала. Для Nuxt используют библиотеку тестов Vitest и пакет @nuxt/test-utils, который запускает тесты в окружении Nuxt — с автоимпортом и плагинами.

Установка

npm install -D @nuxt/test-utils vitest @vue/test-utils happy-dom

vitest запускает тесты, @vue/test-utils выводит компоненты, happy-dom заменяет браузер. Создайте в корне проекта файл настроек:

// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config'
 
export default defineVitestConfig({
  test: {
    environment: 'nuxt'
  }
})

Окружение nuxt подключает к тестам всё, что есть в приложении: короткий путь ~, автоимпорт, модули. Добавьте команду в раздел scripts файла package.json: "test": "vitest".

Тест функции

Проверим formatDate из урока о composables. Создайте test/formatDate.test.ts:

// test/formatDate.test.ts
import { describe, expect, it } from 'vitest'
import { formatDate } from '~/utils/formatDate'
 
describe('formatDate', () => {
  it('выводит дату по-русски', () => {
    expect(formatDate('2025-03-14')).toBe('14 марта 2025 г.')
  })
})

describe объединяет тесты в группу, it описывает один тест, expect(...).toBe(...) сравнивает результат с ожидаемым. Запустите:

npm run test

Vitest найдёт файлы .test.ts, выполнит их и выведет в терминале зелёную отметку и строку 1 passed. Vitest остаётся запущенным и перезапускает тесты при каждом сохранении файла; выйти — клавишей q.

Тест компонента

Компоненты Nuxt выводят функцией mountSuspended: она умеет ждать асинхронный <script setup> и знает про автоимпорт.

// test/PostCard.test.ts
import { describe, expect, it } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import PostCard from '~/components/PostCard.vue'
 
describe('PostCard', () => {
  it('показывает заголовок статьи', async () => {
    const wrapper = await mountSuspended(PostCard, {
      props: { post: { id: 1, title: 'Первый пост', text: 'Привет, мир!' } }
    })
 
    expect(wrapper.text()).toContain('Первый пост')
  })
})

Тест выводит карточку со статьёй и проверяет, что заголовок есть в тексте. Если в шаблоне PostCard.vue случайно удалить {{ post.title }}, тест упадёт и покажет, чего не хватает.

Какие бывают тесты

Сквозные тесты собирают приложение, запускают сервер и открывают страницы, поэтому они медленнее. Начинайте с модульных и компонентных.

Частая ошибка

Выводить компонент Nuxt обычной функцией mount из @vue/test-utils или запускать тесты без environment: 'nuxt'. Тогда автоимпорт не работает, и тест падает с ошибками вроде useLikes is not defined, хотя приложение работает. Для компонентов Nuxt используйте mountSuspended и окружение nuxt.