基于Mocha的VueX单元测试首次运行失败、二次运行正常问题排查

• 核心是测试执行与源码编译的时序不匹配：首次运行npm run test时，Vue单文件组件、Vuex源码的编译任务和测试执行任务并行触发，测试线程读取到未完成编译的残缺产物，直接抛出编译错误。
• 首次运行结束后，完整的编译产物已经写入本地缓存目录（默认存放在node_modules/.cache下的对应依赖缓存文件夹），第二次运行时测试直接读取已完成编译的缓存文件，因此可以正常通过。
• 你所用版本的@vue/cli-plugin-unit-mocha、babel-loader等编译相关依赖存在原生缺陷，没有将源码预编译逻辑前置到测试执行逻辑之前，也会触发该问题。

• 修改package.json中的test命令，新增预编译步骤，强制全量编译完成后再启动测试，示例调整如下（根据你实际的编译工具修改对应命令即可）：

  // 修改前
  "test": "vue-cli-service test:unit"
  // 修改后
  "test": "babel src --out-dir temp_test_dist && vue-cli-service test:unit"
  

• 给测试命令添加禁用缓存参数，强制每次执行都走全量编译流程，避免读取残缺缓存：

  "test": "vue-cli-service test:unit --no-cache"
  

• 升级相关依赖到稳定正式版，修复内置的构建时序缺陷，建议升级的依赖清单：@vue/cli-plugin-unit-mocha、mocha、@babel/core、vue-loader。
• 给Mocha配置提前注册编译处理器，测试启动前就完成Vue、ES6+语法的编译能力注册，避免运行时才触发编译：

  "test": "mocha -r @babel/register -r @vue/test-utils/dist/vue-test-utils.js tests/unit/**/*.spec.js"
  

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