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