mercredi 13 novembre 2019

Vue unit testing with new vue-cli Mocha+Chai setup

My vue project was started with vue init 'webpack-simple' boilerplate and I added no testing utilities. Now that I want to add unit-testing, vue-test-utils documentation is obsolete (see github link on it) and it recommends to try the vue-cli-3 out-of-the-box configurations for unit testing.

So I started a project with vue create (vue-cli versions 3 and 4 do the same scaffolding) and selected only the latest Mocha+Chai setup. When trying to import that config into my older project, I encountered problems:

My package.json was as follows, older setup:

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "vue": "^2.5.11",
    "vue-router": "^3.1.3",
    "vue-sweetalert2": "^2.1.4",
    "vuetify": "^2.1.0",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@mdi/font": "^4.5.95",
    "babel-core": "^6.26.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "dotenv-flow-webpack": "^1.0.0",
    "eslint": "^6.5.1",
    "eslint-config-prettier": "^6.4.0",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.2.3",
    "file-loader": "^1.1.4",
    "prettier": "^1.18.2",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^1.0.1",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "vuetify-loader": "^1.2.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "license": "MIT"
}

The newly created project with vue-cli for mocha and chai:

{
  "name": "vue-only-test",
  "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": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-unit-mocha": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "chai": "^4.1.2",
    "vue-template-compiler": "^2.6.10"
  }
}

So, not knowing really how to update older vue projects to the newest boilerplates vue-cli create makes, I tried to install the dependencies that I lacked (in my existing project) and were on this last boilerplate's package.json, ending with one like this:

{
  "name": "",
  "version": "1.0.0",
  "private": true,      
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "serve": "vue-cli-service serve",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^3.4.1",
    "vue": "^2.5.11",
    "vue-router": "^3.1.3",
    "vue-sweetalert2": "^2.1.4",
    "vuetify": "^2.1.0",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@mdi/font": "^4.5.95",
    "@vue/cli-plugin-e2e-nightwatch": "^4.0.5",
    "@vue/cli-plugin-unit-mocha": "^4.0.5",
    "@vue/cli-service": "^4.0.5",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^6.26.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "chai": "^4.2.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "dotenv-flow-webpack": "^1.0.0",
    "eslint": "^6.5.1",
    "eslint-config-prettier": "^6.4.0",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.2.3",
    "file-loader": "^1.1.4",
    "prettier": "^1.18.2",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^1.0.1",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "vuetify-loader": "^1.2.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "license": "MIT"
}

When running tests, I get this error:

npm run test:unit
npm info it worked if it ends with ok
npm info using npm@6.9.0
npm info using node@v10.16.3
npm timing npm Completed in 241ms
npm info ok
npm info it worked if it ends with ok
npm info using npm@6.12.0
npm info using node@v10.16.3
npm info lifecycle utm-sign-up@1.0.0~pretest:unit: utm-sign-up@1.0.0
npm info lifecycle utm-sign-up@1.0.0~test:unit: utm-sign-up@1.0.0

> utm-sign-up@1.0.0 test:unit D:\dev\autoregister
> vue-cli-service test:unit

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'webpack/lib/Watching'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (D:\dev\autoregister\node_modules\mochapack\lib\webpack\compiler\createWatchCompiler.js:21:17)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
 ERROR  mochapack exited with code 1.
npm info lifecycle utm-sign-up@1.0.0~test:unit: Failed to exec test:unit script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! utm-sign-up@1.0.0 test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the utm-sign-up@1.0.0 test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm timing npm Completed in 7230ms

Indeed there is no webpack/lib/Watching in my node_modules, but I don't understand how webpack is configured in the new setup, as there is no relevant entry for it in the package.json with a version of it, su updating my webpack package seems pointless.

How could I get this to work using the new vue-cli proposed boilerplate? As a try to get updated, importing my old project files and config files into this new project sounds terrible, as it is a job's shared project!

Aucun commentaire:

Enregistrer un commentaire