**Компонент с async setup:** ```vue ``` ```typescript // Тест — нужен Suspense import { describe, it, expect, vi } from 'vitest' import { mount, flushPromises } from '@vue/test-utils' import { Suspense, defineComponent, h } from 'vue' import AsyncUserProfile from '../AsyncUserProfile.vue' import * as api from '@/api/users' vi.mock('@/api/users') // Обёртка с Suspense function mountWithSuspense(userId: number) { return mount( defineComponent({ setup() { return () => h(Suspense, null, { default: () => h(AsyncUserProfile, { userId }), fallback: () => h('div', { class: 'loading' }, 'Loading...'), }) }, }), ) } describe('AsyncUserProfile', () => { it('показывает fallback во время загрузки', () => { vi.mocked(api.fetchUser).mockReturnValue(new Promise(() => {})) const wrapper = mountWithSuspense(1) expect(wrapper.find('.loading').exists()).toBe(true) expect(wrapper.find('.profile').exists()).toBe(false) }) it('показывает профиль после загрузки', async () => { vi.mocked(api.fetchUser).mockResolvedValue({ id: 1, name: 'Alice', email: 'alice@test.com', }) const wrapper = mountWithSuspense(1) await flushPromises() expect(wrapper.find('.loading').exists()).toBe(false) expect(wrapper.find('h2').text()).toBe('Alice') }) }) ``` **Компонент с async-операциями в setup (не async setup):** ```vue ``` ```typescript describe('UserList', () => { it('загружает и отображает пользователей', async () => { vi.mocked(api.fetchUsers).mockResolvedValue([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, ]) const wrapper = mount(UserList) // До flushPromises — loading expect(wrapper.find('.loader').exists()).toBe(true) await flushPromises() // После — данные expect(wrapper.find('.loader').exists()).toBe(false) expect(wrapper.findAll('.user-item')).toHaveLength(2) }) }) ``` **Fake timers:** ```typescript // composables/useDebounce.ts export function useDebounce(value: Ref, delay: number) { const debounced = ref(value.value) as Ref let timeout: ReturnType watch(value, (newVal) => { clearTimeout(timeout) timeout = setTimeout(() => { debounced.value = newVal }, delay) }) return debounced } ``` ```typescript describe('useDebounce', () => { beforeEach(() => { vi.useFakeTimers() }) afterEach(() => { vi.useRealTimers() }) it('обновляет значение после задержки', async () => { const source = ref('initial') const debounced = useDebounce(source, 300) source.value = 'updated' await nextTick() // Watcher сработал // До таймера — старое значение expect(debounced.value).toBe('initial') vi.advanceTimersByTime(300) // После — новое expect(debounced.value).toBe('updated') }) it('сбрасывает таймер при повторном изменении', async () => { const source = ref('a') const debounced = useDebounce(source, 300) source.value = 'b' await nextTick() vi.advanceTimersByTime(200) // 200 из 300 source.value = 'c' // Сброс таймера await nextTick() vi.advanceTimersByTime(200) // Ещё 200 — но таймер начался заново expect(debounced.value).toBe('a') // Всё ещё старое vi.advanceTimersByTime(100) // Теперь 300 с последнего изменения expect(debounced.value).toBe('c') }) }) ``` **defineAsyncComponent:** ```typescript import { defineAsyncComponent } from 'vue' const AsyncModal = defineAsyncComponent(() => import('../components/HeavyModal.vue'), ) // Тест it('загружает async-компонент', async () => { const wrapper = mount(ParentComponent) // Изначально компонент не загружен expect(wrapper.findComponent(HeavyModal).exists()).toBe(false) // Триггерим загрузку (например, клик по кнопке) await wrapper.find('[data-testid="open-modal"]').trigger('click') await flushPromises() expect(wrapper.findComponent(HeavyModal).exists()).toBe(true) }) ``` --- ## 📌 Реальные кейсы 🔹 **Тестирование polling:** ```typescript describe('usePolling', () => { beforeEach(() => vi.useFakeTimers()) afterEach(() => vi.useRealTimers()) it('вызывает callback каждые N мс', async () => { const callback = vi.fn().mockResolvedValue({ status: 'ok' }) const { result, app } = withSetup(() => usePolling(callback, 5000)) await flushPromises() // Первый вызов expect(callback).toHaveBeenCalledTimes(1) vi.advanceTimersByTime(5000) await flushPromises() expect(callback).toHaveBeenCalledTimes(2) vi.advanceTimersByTime(5000) await flushPromises() expect(callback).toHaveBeenCalledTimes(3) app.unmount() // Polling должен остановиться vi.advanceTimersByTime(5000) await flushPromises() expect(callback).toHaveBeenCalledTimes(3) // Не увеличился }) }) ``` --- ## Частые ошибки ❌ Ожидать, что `await nextTick()` разрешит промисы: ```typescript await nextTick() // Только DOM update, НЕ промисы // fetchUsers всё ещё pending ``` ✅ `flushPromises` для промисов, `nextTick` для DOM: ```typescript await flushPromises() // Все промисы resolved // Потом nextTick, если нужен DOM update после state change ``` --- ❌ Fake timers без `useRealTimers` в afterEach: ```typescript beforeEach(() => vi.useFakeTimers()) // Забыл afterEach — следующий тест ломается ``` ✅ Всегда пара: ```typescript beforeEach(() => vi.useFakeTimers()) afterEach(() => vi.useRealTimers()) ``` --- ❌ Тестировать async-компонент без Suspense: ```typescript const wrapper = mount(AsyncSetupComponent) // Ошибка: не обёрнут в Suspense ``` ✅ Компонент с `async setup` требует Suspense: ```typescript const wrapper = mount(SuspenseWrapper) // Обёртка с ``` --- ## Резюме | Сценарий | Инструмент | |---|---| | Промисы (API, fetch) | `flushPromises()` | | setTimeout / setInterval | `vi.useFakeTimers()` + `vi.advanceTimersByTime()` | | async setup | `` обёртка + `flushPromises()` | | defineAsyncComponent | `flushPromises()` после триггера загрузки | | DOM update после state | `await nextTick()` | 🔑 `flushPromises` — для промисов, `vi.advanceTimersByTime` — для таймеров, `nextTick` — для DOM. async setup требует Suspense. Fake timers всегда парой: use/restore. ---

{{ user.name }}

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