在Vitest中运行Pinia测试时遇vue-demi导出错误求助

错误详情 #

运行Vitest测试Pinia相关代码时触发以下语法错误：

SyntaxError: The requested module 'vue-demi' does not provide an export named 'hasInjectionContext'

项目依赖配置 #

当前package.json中的依赖配置如下：

"devDependencies": {
    "@apollo/client": "^3.7.12",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@graphql-tools/merge": "^8.3.11",
    "@graphql-tools/schema": "^9.0.9",
    "@pinia/nuxt": "^0.4.6",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vitest/ui": "^0.29.8",
    "@vue/test-utils": "^2.3.2",
    "cli-color": "^2.0.3",
    "graphql": "^15.8.0",
    "graphql-request": "^5.0.0",
    "graphql-tag": "^2.12.6",
    "happy-dom": "^8.9.0",
    "nuxt": "^3.0.0",
    "nuxt-icon": "^0.1.7",
    "rollup": "^3.20.2",
    "sass": "^1.56.1",
    "sass-loader": "^10.4.1",
    "vite": "^3.2.5",
    "vitest": "^0.29.8"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.2.1",
    "bootstrap": "^5.2.3",
    "date-fns": "^2.29.3",
    "es5-ext": "^0.10.62",
    "pinia": "^2.1.3",
    "qs": "^6.11.0",
    "v-lazy-image": "^2.1.1",
    "vue3-datepicker": "^0.3.4"
  }

解决方法 #

该错误源于vue-demi版本不兼容，@vue/test-utils@2.3.2所需的vue-demi版本可能被项目其他依赖覆盖为旧版，可按以下步骤修复：

• 步骤1：清理并重装依赖
  删除node_modules文件夹和package-lock.json/yarn.lock文件，执行：

  npm install
  # 或
  yarn install
  

• 步骤2：手动指定兼容的vue-demi版本
  在devDependencies中添加明确的vue-demi版本（推荐^0.14.5）：

  "devDependencies": {
    // ... 其他依赖
    "vue-demi": "^0.14.5"
  }
  

  再次执行依赖安装命令。

• 步骤3：升级测试工具依赖（可选）
  升级@vue/test-utils到更稳定的版本（如^2.4.0），同时确保pinia与@pinia/nuxt版本匹配。

• 步骤4：配置Vitest的Pinia环境
  若使用Nuxt 3，需在Vitest配置中正确初始化Pinia：
  在vitest.config.ts中：

  import { defineConfig } from 'vitest/config'
  import Vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [Vue()],
    test: {
      environment: 'happy-dom',
      setupFiles: ['./tests/setup.ts']
    }
  })
  

  在tests/setup.ts中添加初始化代码：

  import { createPinia } from 'pinia'
  import { createApp } from 'vue'
  
  const app = createApp({})
  app.use(createPinia())
  

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