由vue-cli引发异常的单元测试

Question

使用vue-cli（v3.5.1）创建项目后，当我运行“ npm run test：unit”时，自动创建的单元测试失败。

运行“ vue create”后，我手动选择了以下选项：TS，Router，Vuex，Linter，Unit，E2E，类样式组件语法：是，Babel：否，历史记录模式：否，linter：TSLint，停止保存时，进行单元测试的解决方案：Mocha，E2E测试解决方案Cypress，配置文件：专用文件。

“ npm run test：unit”的输出如下。

WEBPACK Compiled successfully in 7321ms
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
ReferenceError: performance is not defined at Module../node_modules/vue/dist/vue.runtime.esm.js

我试图修改用于运行测试的npm脚本，如下所示（不确定包含是否来自Node，并且我认为应该不是），但是我得到一个错误提示在\ node_modules \ mocha-webpack \ lib中找不到perf_hooks。

"test:unit": "vue-cli-service test:unit --include perf_hooks"

代码示例： https://github.com/derek-baker/super-duper-guacamole

Answer 1

如果除了上述选项之外，我选择包括Babel作为功能，并且还将Babel与TypeScript一起用于自动检测的polyfill，则单元测试将按预期运行。工作配置示例如下。

{
  "name": "vue-cli-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "vue": "^2.6.6",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/chai": "^4.1.0",
    "@types/mocha": "^5.2.4",
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-e2e-cypress": "^3.5.0",
    "@vue/cli-plugin-typescript": "^3.5.0",
    "@vue/cli-plugin-unit-mocha": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "chai": "^4.1.2",
    "typescript": "^3.2.1",
    "vue-template-compiler": "^2.5.21"
  }
}

Answer 2

您必须伪造isServerBuild 有一个未解决的问题https://github.com/vuejs/vue-cli/issues/2270#issue-351812395

mocha webpack引用https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-unit-mocha/index.js#L5

快速补救措施：

x = 10;
x = x + Math.floor(Math.random()* 500);
console.log(x)
//x gets added by x + random number