Vue3执行npm run test:unit提示文件名目录名或卷标语法错误

报错现象 #

在Vue3项目下执行npm run test:unit单元测试命令时直接报错，终端输出如下：

$ npm run test:unit
> 04.fundamentos@0.1.0 test:unit
> vue-cli-service test:unit
The filename, directory name, or volume label syntax is incorrect.

对应项目package.json配置如下：

{
  "name": "04.fundamentos",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "jest": "^27.0.5"
  }
}

故障原因 #

该报错是Windows环境下的路径解析失败，常见诱因有两个：

• 项目存放的完整路径包含中文、全角符号、特殊转义字符，或者路径层级过深，导致jest执行时无法正确读取文件路径
• 全局安装的Vue CLI版本和项目本地依赖的@vue/cli-service版本不一致，调用测试脚本时路径拼接逻辑出错

修复步骤 #

按顺序操作即可：

• 检查项目所在的全路径，把路径中所有中文、全角标点、特殊符号（比如&、%、括号、连续空格）全部替换为英文半角字符，尽量把项目放在磁盘根目录附近的短路径下，比如D:\code\vue-demo这类格式。修改完成后删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖，再尝试运行测试命令
• 如果路径调整后仍报错，先卸载全局的旧版Vue CLI：执行npm uninstall -g @vue/cli，之后安装和项目本地版本匹配的脚手架：执行npm install -g @vue/cli@5.0.0，解决全局本地版本差导致的脚本调用异常
• 以上两步都无效的话，直接绕过vue-cli-service调用本地jest：确认本地已安装jest相关依赖后，把package.json里scripts下的test:unit字段修改为"test:unit": "jest"，重新执行npm run test:unit即可正常运行

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