Vue3 Suspense组件单元测试中无法访问组件函数的问题

问题原因 #

当组件使用顶层await配合<Suspense>时，Vue会将该组件包装为异步组件。此时直接通过wrapper.vm访问的是Suspense的包装实例，而非实际业务组件的实例，因此无法获取到组件内部定义的函数。

解决方法 #

1. 等待Suspense解析并获取实际组件实例 #

先等待Suspense完成异步渲染，再通过findComponent定位到实际业务组件实例，即可访问内部函数：

组件代码示例

<template>
  <p>{{ content }}</p>
</template>

<script setup>
// 顶层异步逻辑
const content = await Promise.resolve('3')

// 组件内部函数
function getText() {
  return content
}

// 关键：<script setup>默认闭包，需通过defineExpose显式暴露要测试的函数
defineExpose({ getText })
</script>

测试代码（Vitest）

import { mount } from '@vue/test-utils'
import AsyncComponent from './AsyncComponent.vue'

test('直接访问组件内部函数', async () => {
  const wrapper = mount(AsyncComponent)
  
  // 等待Suspense完成异步渲染
  await wrapper.vm.$nextTick()
  
  // 获取实际业务组件实例
  const componentInstance = wrapper.findComponent(AsyncComponent)
  
  // 访问并验证函数
  expect(componentInstance.vm.getText()).toBe('3')
})

2. Mock组件内部的异步依赖或函数 #

如果需要mock组件中的异步逻辑（比如API请求）或内部函数，可结合Vitest的vi.mock和组件暴露的方法实现：

带有异步依赖的组件示例

<script setup>
import { fetchContent } from './api'

// 依赖外部API的异步逻辑
const content = await fetchContent()

function getText() {
  return content
}

defineExpose({ getText })
</script>

Mock并测试的代码

import { mount } from '@vue/test-utils'
import AsyncComponent from './AsyncComponent.vue'
import { fetchContent } from './api'

// Mock外部API
vi.mock('./api', () => ({
  fetchContent: vi.fn().mockResolvedValue('模拟数据')
}))

test('Mock异步依赖并验证函数', async () => {
  const wrapper = mount(AsyncComponent)
  await wrapper.vm.$nextTick()
  
  const componentInstance = wrapper.findComponent(AsyncComponent)
  
  // 验证mock函数被调用
  expect(fetchContent).toHaveBeenCalledTimes(1)
  // 验证组件函数返回mock后的结果
  expect(componentInstance.vm.getText()).toBe('模拟数据')
})

关键注意点 #

• <script setup>中定义的函数默认是闭包私有，必须通过defineExpose显式暴露才能在测试中访问；
• 必须等待$nextTick确保Suspense完成异步渲染，否则无法获取到正确的组件实例；
• 测试时直接mount目标组件即可，无需额外包裹<Suspense>，vue-test-utils会自动处理内部的Suspense逻辑。

内容的提问来源于stack exchange，提问作者eXception