从Jest迁移至Vitest时，组件含computed属性触发ReferenceError报错

问题原因 #

你的Vue组件中使用了computed API，但在<script setup>中未显式导入，且测试环境未配置Vue API的自动导入机制，导致Vitest运行时无法找到computed的定义。

解决方案 #

方案1：显式导入computed（推荐） #

直接在组件的<script setup>中导入Vue的computed方法，这是最可靠的解决方式，不受环境配置影响：

<template>
  <image
    :src="src"
    :onerror="onErrorLoadImage"
    :class="['avatar', { big }]"
  />
</template>

<script setup lang="ts">
// 新增导入语句
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  src?: string
  big?: boolean
  errorImage?: string
}>(), {
  src: '',
  big: false,
  errorImage: '/no-avatar.png',
})

const onErrorLoadImage = computed(() => `this.src='${props.errorImage}';this.onerror='';`)
</script>

方案2：配置自动导入（适合多组件场景） #

如果希望所有组件都无需手动导入Vue API，可以通过unplugin-auto-import插件实现自动导入：

1. 安装插件：

npm install unplugin-auto-import --save-dev

2. 在vite.config.ts或vitest.config.ts中添加配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'], // 自动导入Vue核心API
      dts: true // 生成类型声明文件，支持TypeScript语法提示
    })
  ]
})

额外优化提示 #

你的测试代码中使用了propsData，但@vue/test-utils v2.x版本已废弃该参数，应改用props：

const wrapper = mount(UiAvatar, {
  props: { // 替换propsData为props
    src,
    big,
    errorImage
  }
})

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