Jest测试集成Vue与jQuery的REST API代码时创建Vue实例报未定义错误

报错根因 #

Jest默认运行在Node环境下，不会自动加载浏览器环境中通过<script>标签挂载的全局Vue、jQuery对象，也不会自动模拟浏览器的全局变量挂载逻辑，因此执行到new Vue()语句时，无法在当前测试作用域中找到Vue全局变量。

配置修复步骤 #

• 确认Vue引入方式
  • 若hoge.js中通过ES模块导入Vue（即存在import Vue from 'vue'语句）：先确认导入路径无错误，同时确认vue依赖已安装到项目中。
  • 若hoge.js中直接使用全局Vue变量（无导入语句，对应浏览器中通过<script src="xxx/vue.js">引入的场景）：需在Jest测试环境中手动挂载Vue全局变量。
• 全局挂载Vue配置
  方案1：在单个测试文件hoge.test.js顶部添加挂载逻辑：

  // hoge.test.js 头部添加
  import Vue from 'vue';
  global.Vue = Vue;
  // 若jQuery也报未定义错误，可同步挂载
  import $ from 'jquery';
  global.$ = $;
  

  方案2：全局统一配置，避免每个测试文件重复编写挂载逻辑：
  1. 项目根目录新建jest.setup.js，写入：

  import Vue from 'vue';
  global.Vue = Vue;
  import $ from 'jquery';
  global.$ = $;
  

  2. 在jest.config.js（或package.json内的jest配置段）中引入该setup文件：

  module.exports = {
    setupFiles: ['<rootDir>/jest.setup.js']
  }
  

• 依赖安装校验
  执行以下命令确认测试所需依赖已安装：

  npm install vue jquery --save-dev
  

常见额外校验项 #

• 若项目包含.vue单文件组件，需额外安装vue-jest、@vue/test-utils依赖，并在Jest配置中添加SFC对应的transform规则，避免后续出现新的解析报错。
• 保持Vue引入方式统一，避免同时混用全局挂载和ES模块导入两种方式，导致变量指向不一致。

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