Как тестировать Vue-компоненты?

Question

Accepted Answer

## Суть на практике
Чаще всего: **Vitest** + **Vue Test Utils** (`@vue/test-utils`) или Testing Library. Проверяют рендер, props/emits, взаимодействие пользователя; e2e — Playwright/Cypress.

## Пример unit
```js
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import Counter from './Counter.vue'

describe('Counter', () => {
  it('emits increment', async () => {
    const w = mount(Counter, { props: { modelValue: 0 } })
    await w.get('button').trigger('click')
    expect(w.emitted('update:modelValue')[0]).toEqual([1])
  })
})
```

Мокайте роутер/Pinia через `global.plugins` / `createTestingPinia`. Для async — `flushPromises` / `await`.

## Стратегия
- Unit: чистая логика composables без монтирования.
- Component: поведение UI и emits.
- e2e: критичные пользовательские потоки.

Не тестируйте детали VDOM; тестируйте контракт (что видит пользователь / что уходит наружу).

## Итог
VTU/Vitest для компонентов, e2e для сценариев; цель — поведение, не снапшоты внутреннего стейта ради стейта.