Vue3组件vitest测试出现ReferenceError:Vue is not defined的解决方法

问题原因 #

vue-mapbox-ts的打包代码依赖全局Vue变量，但Vitest测试环境默认不会自动将Vue注入全局对象，加载库时触发ReferenceError。部分场景下该库是为Vue2设计的，未适配Vue3的模块化导入方式。

解决方案 #

方案1：在测试文件中直接全局注入Vue #

在OverviewMapView.test.js开头添加代码，提前为全局对象挂载Vue：

import { createApp } from 'vue'
// 模拟库所需的全局Vue对象结构
global.Vue = {
  createApp,
  version: '3.3.4' // 替换为你项目使用的Vue版本
}

// 之后再导入组件和测试相关代码
import OverviewMapView from '@/components/OverviewMapView.vue'
// ... 编写测试逻辑

方案2：通过Vitest全局配置注入 #

1. 在测试目录下创建setup.js文件（如tests/setup.js）：

import { createApp } from 'vue'
global.Vue = { createApp, version: '3.x' }

2. 修改vitest.config.js，指定测试前的全局setup文件：

export default {
  test: {
    setupFiles: ['./tests/setup.js'],
    // 其他测试配置项
  }
}

方案3：模拟Vue2风格的全局API（针对库适配Vue2的情况） #

如果vue-mapbox-ts依赖Vue2的全局API（如Vue.component、Vue.use），需要补充模拟这些方法：

import * as Vue from 'vue'
global.Vue = {
  ...Vue,
  component: () => {},
  use: () => {},
  // 根据库的实际需求补充其他API
}

额外建议 #

• 检查vue-mapbox-ts的官方文档或npm页面，确认其是否支持Vue3。如果仅支持Vue2，考虑替换为适配Vue3的Mapbox组件库，或自行基于Mapbox GL JS封装组件。
• 若库已支持Vue3但仍报错，尝试更新库到最新版本。

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