I have setup unit testing using installation instructions from https://v1.test-utils.vuejs.org/
Tests are running properly. But the coverage is coming incorrectly.
In the report it is showing it has only 1 statement, 1 function, 2 branches for some reason.
It's not showing coverage for all the lines. It shows coverage in the first line and doesn't show coverage anywhere else. Don't know what's the issue is here.
I'm using Bootstrap-vue to render components. Can this create an issue with coverage? I'm asking this because the example.spec.js that came for the helloworld component is showing coverage correctly.
my dev dependencies
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "^5.0.4",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^1.3.0",
"#vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"flush-promises": "^1.0.2",
"jest": "^27.0.5",
"node-sass": "^7.0.1",
"sass-loader": "^12.6.0",
"vue-template-compiler": "^2.6.14"
},
Related
I have a Vue3 project and Volar is diplaying an issue:
#types/node version incompatible. #types/node version 18.11.0 is incompatible to Vue version 3.2.41, it will cause DOM event type broken in template.
But my project doesn't event have such package included.
My package.json:
"dependencies": {
"core-js": "^3.6.5",
"emailjs-com": "^2.6.4",
"firebase": "^9.12.1",
"i18n": "^0.15.1",
"pinia": "^2.0.23",
"vue": "^3.1.0",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.1.0",
"eslint": "^8.25.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.6.0",
"prettier": "^2.7.1",
"sass": "^1.26.5",
"vite": "^3.1.0"
}
I can't also find anything of similar name in node_modules. Where is that issue coming from?
I am trying to write testing for Vue application by using Vue Test Utils. I have faced the issue "ReferenceError: regeneratorRuntime is not defined" because of compiling async/await in babel.
Searching online, I installed the following dependencies
In my "devDependencies"
"#babel/core": "^7.15.0",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#vue/cli-plugin-babel": "^3.1.1",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-plugin-unit-jest": "^4.5.13",
"#vue/cli-service": "^3.1.1",
"#vue/test-utils": "^1.2.2",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^27.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
In my "dependencies"
"babel-polyfill": "^6.26.0",
"core-js": "^3.16.3",
Also, added the plugins in babel.config.js
module.exports = {
presets: ['#vue/app', "#babel/preset-env"],
plugins: ['#babel/plugin-transform-runtime', "transform-regenerator"],
}
But when run a test, it still output the same error about ReferenceError: regeneratorRuntime is not defined. I really like to know what's going on with it...Thanks.
It was under my understanding that Vue 3 got rid of one-container restriction in template and the mandatory v-bind:key in v-for loops. But my code gives errors. i.e.:
"Component template should contain exactly one root element."
fyi I use vue-3 in combination with Nuxt... maybe that changes things.
Here is my package.json stack:
"dependencies": {
"#nuxtjs/axios": "^5.13.1",
"#nuxtjs/composition-api": "^0.24.4",
"core-js": "^3.9.1",
"nuxt": "^2.15.3"
},
"devDependencies": {
"#nuxt/types": "^2.15.3",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/eslint-config-typescript": "^6.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/vuetify": "^1.12.1",
"#vue/test-utils": "^1.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.22.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-vue": "^7.7.0",
"jest": "^26.6.3",
"ts-jest": "^26.5.4",
"vue-jest": "^3.0.4"
}
The dependencies says I have Linting but this is not actively running..
Anyone knows what is going on?
Nuxt is only compatible with Vue2 as lf right now. Even if you use #nuxtjs/composition-api, this will not change the way the template is compiled (it is still Vue2 at the end of the loop).
The latter package only enables the use of composition API, this is not actually Vue3.
npm run serve was working fine, suddenly it started giving the same error. I am not able to understand the root cause of it and why it isn't working. Can anyone suggest how to resolve this issue?
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.0",
"#vue/cli-plugin-eslint": "^4.2.0",
"#vue/cli-plugin-router": "^4.2.0",
"#vue/cli-plugin-vuex": "^4.2.0",
"#vue/cli-service": "^4.2.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2",
"prettier": "^1.19.1",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
}
To resolve this problem, it is enough to remove plugins of eslint. Therefore, you must remove below line, and again run your project.
"#vue/cli-plugin-eslint": "^4.2.0"
I have created a project with vue-service-cli. After trying to use tesseract OCR but I can't load lang.traineddata locally and remotely. I have tried examples (they work) from tesseract.js repo and other many ways but with no result. When I try to load them I see standard error:
Error opening data file ./eng.traineddata
Please make sure the TESSDATA_PREFIX environment variable is set to your "tessdata" directory.
Failed loading language 'eng'
Tesseract couldn't load any languages!
AdaptedTemplates != nullptr:Error:Assert failed:in file /src/src/classify/adaptmatch.cpp, line 196
trap!
I suspect this is a problem by .asar archive format ( from vue-cli-plugin-electron-builder ), which is in "/node_modules/electron/dist/resources/electron.asar". I can load files from ./public but I was read languages files have to are in the process directory - I don't know if it's true. Some configuration can't work together.
My code
const data = await Tesseract.recognize(
"https://tesseract.projectnaptha.com/img/eng_bw.png",
"eng",
{
logger: console.log,
corePath: window.location.origin + "/tesseract/tesseract-core.wasm.js",
workerPath: window.location.origin + "/tesseract/worker.min.js",
langPath: window.location.origin + "/tesseract/tessdata"
//or
langPath: path.join(__dirname, "tessdata")
}
My dependencies
"dependencies": {
"core-js": "^3.4.4",
"electron": "5.0.0",
"semantic-ui-css": "^2.4.1",
"tesseract.js": "2.0.2",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-router": "^4.1.0",
"#vue/cli-plugin-typescript": "^4.1.0",
"#vue/cli-plugin-vuex": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/eslint-config-prettier": "^5.0.0",
"#vue/eslint-config-typescript": "^4.0.0",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"prettier": "^1.19.1",
"pug": "^2.0.4",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^8.0.0",
"typescript": "~3.5.3",
"vue-cli-plugin-electron-builder": "^1.4.4",
"vue-template-compiler": "^2.6.10"
}
EDIT:
I noticed that https://github.com/auth0-blog/electron-vue project working fine with Tesseract.js. That project uses Vue but without vue-vli-service which means it doesn't have vue-cli-plugin-electron-builder which confirms the above thesis. I'm still looking for a solution with the use vue-cli
I've found a solution thanks to the module owner.
github issue