Jasmine中用Vue Test Utils挂载组件报document not defined如何解决

数据老陈

2026-10-5

问题原因分析

核心问题是原生Node.js运行环境没有提供浏览器端的document、window等DOM API，而Vue Test Utils的mount方法需要在DOM环境中才能完成组件挂载渲染，所以直接在纯Node环境下执行测试会抛出该错误。
官方文档的示例默认假定测试环境已经配置了DOM模拟能力，你当前的依赖只有Jasmine、Vue和测试工具本身，缺少DOM模拟类依赖，也没有做对应环境初始化配置，才会出现官方示例跑不通的情况。

解决方案

步骤1：安装DOM模拟依赖

执行以下命令安装jsdom和jsdom-global，用来在Node环境中模拟浏览器DOM API：

npm install jsdom@16 jsdom-global --save-dev

注：jsdom v17+版本要求Node.js版本≥16，如果你使用的是更低版本的Node，指定安装v16版本即可适配。
额外规范提示：建议把测试相关的依赖（@vue/test-utils、jasmine、jsdom等）移动到package.json的devDependencies字段下，避免生产环境安装不必要的包。

步骤2：初始化DOM环境

有两种配置方式可选：

单测试文件适配

直接在你的componentTest_spec.js文件最顶部添加两行初始化代码：

require('jsdom-global')()
// 全局挂载Vue，当前示例没有全局Vue调用需求时可省略
global.Vue = require('vue')

全局Jasmine适配（推荐，多测试文件不用重复写初始化代码）

新建初始化文件spec/helpers/setup.js，写入以下内容：

require('jsdom-global')()
global.Vue = require('vue')

新建或修改Jasmine配置文件spec/support/jasmine.json，添加helpers配置，让测试执行前先运行初始化代码：

{
  "spec_dir": ".",
  "spec_files": [
    "**/*_spec.js"
  ],
  "helpers": [
    "spec/helpers/**/*.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": true
}