vue-cli-3mocha-webpack

Unit-tests produced by vue-cli throw exceptions

After creating a project with vue-cli(v3.5.1), the unit test that was auto-created is failing when I run: 'npm run test:unit'.

After running 'vue create', I manually selected the following options: TS, Router, Vuex, Linter, Unit, E2E, class-style component syntax: yes, Babel: no, history mode: no, linter: TSLint, Lint on save, unit-test solution: Mocha, E2E test solution Cypress, config files: dedicated filesenter image description here.

The output of 'npm run test:unit' is below.

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

I attempted to modify the npm script used to run the test as below(wasn't really sure if the include was coming from Node, and I don't think that it should be), but I just get an error stating that perf_hooks wasn't found in \node_modules\mocha-webpack\lib. 

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

Code example: https://github.com/derek-baker/super-duper-guacamole

Solution

  • If, in addition to the options above, I opt to include Babel as a feature, and also use Babel alongside TypeScript for auto-detected polyfills, the unit-test runs as expected. Example of working config is below.

    {
  "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"
  }
}