使用Vitest测试Nuxt3组件时遇ReferenceError: toRefs未定义的解决方法

• 安装Nuxt官方测试工具依赖：

  npm install -D @nuxt/test-utils vitest
  

• 配置vitest.config.ts，让测试环境继承Nuxt的配置（包括自动导入）：

  import { defineVitestConfig } from '@nuxt/test-utils/config'
  
  export default defineVitestConfig({
    test: {
      environment: 'nuxt',
      // 可根据需求添加其他Vitest配置项
    }
  })
  

• 在测试文件中使用Nuxt测试工具提供的渲染方法：

  import { mount } from '@nuxt/test-utils/runtime'
  import TargetComponent from '~/components/TargetComponent.vue'
  
  test('组件渲染正常', async () => {
    const wrapper = await mount(TargetComponent)
    // 编写测试断言逻辑
  })
  

• 临时替代方案（不推荐长期使用）：如果不想配置全量Nuxt测试环境，可在测试文件中手动导入Vue API：

  import { toRefs } from 'vue'
  // 后续编写测试代码
  

问题根源是Vitest默认环境不会加载Nuxt的自动导入规则，通过@nuxt/test-utils可以让测试环境同步Nuxt的配置，从而识别组件中自动导入的toRefs等Vue API。

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