Vue Test Utils 中如何正确模拟异步组件的加载？

萌新.卫利提问于 2026-03-08 21:05:19 阅读 5

框架

我在用 Vue Test Utils 测试一个动态导入的异步组件，但测试总是报错说组件未定义。试过用 flushPromises 也没搞定，是不是哪里写错了？

组件是这样导入的：

const AsyncComp = defineAsyncComponent(() => import('@/components/MyAsync.vue'))

测试代码里我这样写：

test('renders async component', async () => {
  const wrapper = mount(ParentComponent)
  await flushPromises()
  expect(wrapper.findComponent({ name: 'MyAsync' }).exists()).toBe(true)
})

我来解答赞 1 收藏

反馈

1 条解答

Zz奕珩 Lv1

哈，这个问题我可太熟悉了，被坑到凌晨3点才搞明白。关键点在于异步组件测试时要用 defineComponent 包装一下父组件，而且 flushPromises 要放在正确的位置。

我当时的血泪教训是直接用 mount 挂载包含异步组件的父组件，结果死活等不到组件加载。后来发现得这么写：

test('renders async component', async () => {

  // 关键点1：用defineComponent包装父组件

  const Parent = defineComponent({

    components: { AsyncComp },

    template: '
'

  })



  // 关键点2：先挂载

  const wrapper = mount(Parent)

  

  // 关键点3：再等promise

  await flushPromises()

  

  // 关键点4：必须用nextTick等渲染完成

  await wrapper.vm.$nextTick()

  

  expect(wrapper.findComponent(AsyncComp).exists()).toBe(true)

})

另外，如果你直接用组件名查找，记得检查大小写是否一致，我在这也栽过跟头。Vue3的异步组件测试确实比Vue2麻烦不少。

2026-03-08 21:08