测试异步组件：掌握 flushPromises、fake timers 与 suspense 模拟

针对 Vue 3 异步组件和 Suspense 的测试策略，使用 vitest 与 @vue/test-utils 的 flushPromises、vi.useFakeTimers 处理延迟加载与异步 setup。 · 难度：入门 · +10XP

测试异步组件：掌握 flushPromises、fake timers 与 suspense 模拟

测试异步组件最大的难点在于等待异步渲染完成。本教程教授如何利用 flushPromises 清空微任务队列，以及如何用 vi.useFakeTimers 控制 setTimeout 或拦截动态 import。同时演示如何通过 stubs 模拟 Suspense 的 fallback 与 default 插槽，确保测试覆盖加载态与内容态。

import { mount } from '@vue/test-utils'
import { flushPromises } from '@vue/test-utils'
import AsyncComponent from './AsyncComponent.vue'
test('displays data after load', async () => {
  const wrapper = mount(AsyncComponent)
  expect(wrapper.text()).toContain('Loading')
  await flushPromises()
  expect(wrapper.text()).toContain('Data loaded')
})