Vue3组合式API项目中Vitest报错getComponent不是函数的问题求助

报错原因 #

1. <script setup>的私有性限制：Vue3的<script setup>语法默认会将内部声明的函数、变量设为组件私有，不会挂载到组件实例（wrapper.vm）上，测试时无法通过$setup.getComponent访问到该函数，直接调用就会触发“不是函数”的报错。
2. 测试环境的实例访问规则：Vue Test Utils对<script setup>暴露的属性，不会放在$setup对象下，而是直接挂载到wrapper.vm上，但前提是你主动显式暴露了目标函数。

解决方案 #

方案1：仅需组件正常渲染（无需测试中调用getComponent） #

确保组件依赖的状态和参数有效，让getComponent能正常执行：

• 检查Pinia的initialState中是否正确初始化了application.status的值，保证模板调用getComponent(application.status)时参数合法。
• 确认测试传入的applicationStatus（若组件逻辑依赖该props）是getComponent能处理的有效值，避免因参数异常间接触发渲染错误。

方案2：需要在测试中调用getComponent函数 #

在组件的<script setup>中通过defineExpose主动暴露该函数：

<script setup lang="ts">
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
import ComponentC from './ComponentC.vue'

// 示例getComponent逻辑
function getComponent(status: string) {
  switch(status) {
    case 'status1': return ComponentA
    case 'status2': return ComponentB
    default: return ComponentC
  }
}

// 将函数暴露到组件实例
defineExpose({
  getComponent
})
</script>

之后在测试中可直接通过wrapper.vm.getComponent访问调用：

// 测试中调用示例
const targetComponent = wrapper.vm.getComponent(TestDataApplicationStatus1)

额外排查点 #

• 核对测试用的TestDataApplicationStatus1值是否和组件中getComponent的判断逻辑匹配，避免返回无效组件导致渲染失败。
• 检查组件模板中application.status的来源：如果是Pinia状态，确保initialState里的application对象包含正确的status字段；如果是props，确认测试时传入的props名称和组件定义一致（比如你测试传的是applicationStatus，但模板用的是application.status，这里可能存在不匹配）。

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