Testing
-
I was under the impression Flow was like TypeScript, just with the added benefit of having a better type inference and also no transpiling (aka “blazing fast”). This article makes a pretty good sell of it all.
https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/
Scott
-
I am trying to test with webpack-karma, I tried some configurations and now I am stucked here:
…
[122] ./node_modules/util/node_modules/inherits/inherits_browser.js 672 bytes {0} [built]
+ 108 hidden modulesERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue
Module not found: Error: Can’t resolve ‘quasar’ in ‘/home/mateu/VueProjects/sails1/cima20js/assets/frontend/src/components’
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue 3:0-203
@ ./src/components/Hello.vue
@ ./src/test/components/hello.Spec.coffeeERROR in ./src/test/components/hello.Spec.coffee
Module not found: Error: Can’t resolve ‘quasar’ in ‘/home/mateu/VueProjects/sails1/cima20js/assets/frontend/src/test/components’
@ ./src/test/components/hello.Spec.coffee 3:0-27
24 08 2017 06:01:03.673:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
24 08 2017 06:01:03.674:INFO [launcher]: Launching browsers PhantomJS, Firefox with unlimited concurrency
24 08 2017 06:01:03.724:INFO [launcher]: Starting browser PhantomJS
24 08 2017 06:01:03.739:INFO [launcher]: Starting browser Firefox
24 08 2017 06:01:04.101:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket vhe0wjpMOy2tMBa0AAAA with id 74984205
24 08 2017 06:01:05.869:INFO [Firefox 55.0.0 (Ubuntu 0.0.0)]: Connected on socket 5AWcaU3_5W61T549AAAB with id 91018619Thank you for your help.
By the way, thankyou for made quasar possible is what I was waiting for
Mateu -
Hello There Quasar Community
I was working the last days integrating some Testing for Quasar Framwork, I Know there is some difficulties there, This is a little project am sharing with you guys, Your comments, I’ll be very happy to hear them thanks
https://github.com/KaisNeffati/VueJSQuasarTesting
Sincerly -
vue-test-utils is the official test library for Vue.js :
https://github.com/vuejs/vue-test-utils
https://vue-test-utils.vuejs.org/en/
https://github.com/vuejs/vue-test-utils-mocha-webpack-example -
@kais Thank you for your contribution. I’ve found it very helpful to get unit and e2e started. Is this work you’ve done still considered covered under the MIT licensing that the original Quasar is under?
-
Hey,
Good news (Qusar v0.15.1x)
I spent last month on configuring Qusar v0.15.1x with Jest 22 and Babel 6. It was real pain in the ass (today I’m thinking about better runner than jest). Important - it works as expected (tests, coverage, reporting to sonar). Will try to find time to publish example project on GH.Bad news (Qusar v0.16.xx)
Yesterday I started migration to Quasar v0.16.xx, Jest 23 and Babel 7.
Right now striggling withmodule-resolver
and vue files,Test suite failed to run TypeError: Cannot read property 'includes' of undefined at node_modules/babel-plugin-module-resolver/lib/normalizeOptions.js:148:22 at node_modules/reselect/lib/index.js:86:37 at node_modules/reselect/lib/index.js:36:25 at PluginPass.pre (node_modules/babel-plugin-module-resolver/lib/index.js:53:60) at transformFile (node_modules/@babel/core/lib/transformation/index.js:98:25) at runSync (node_modules/@babel/core/lib/transformation/index.js:35:3) at transformSync (node_modules/@babel/core/lib/transform-sync.js:15:38) at Object.transform (node_modules/@babel/core/lib/transform.js:20:65) at compileBabel (node_modules/vue-jest/lib/compilers/babel-compiler.js:21:21) at processScript (node_modules/vue-jest/lib/process.js:29:10)
-
@marek-kaczkowski - I am working on a mode for quasar v0.16+ that will set all of this up for you and am looking for feedback and bottlenecks that our users are facing. Feel free to send me a private message and we can talk more in detail about it. If you prefer, you can also escalate 0.16 problems to the repo:
-
@marek-kaczkowski, What does your .babelrc file configuration look like?
Here’s mine for Quasar v0.16.0:
{ "presets": [ [ "@babel/preset-env", { "modules": false, "loose": false, "useBuiltIns": "usage" } ], [ "@babel/preset-stage-2", { "modules": false, "loose": false, "useBuiltIns": true, "decoratorsLegacy": true } ] ], "plugins": [ [ "@babel/transform-runtime", { "polyfill": false, "regenerator": false } ] ], "comments": false, "env": { "test": { "presets": [ ["env", { "targets": { "node": "current" }}] ], "plugins": [ [ "module-resolver", { "root": [ "./src" ], "alias": { "quasar": "quasar-framework/dist/quasar.mat.esm.js", "^vue$": "vue/dist/vue.common.js" } } ] ] } } }
However, I am running into the following issue:
FAIL src/components/search1_primary/search_primary.test.js ● Test suite failed to run ReferenceError: Unknown plugin "@babel/transform-runtime" specified in "/Users/jjpro/Github/Web/dessert/.babelrc" at 0, attempted to resolve relative to "/Users/jjpro/Github/Web/dessert"
The configurations worked in Quasar v0.15.xx but unfortunately, not in v0.16.0, I’ll keep you posted if I get it working.
-
Update to previous message, seems Jest has issues with Babel 7 (Quasar v0.16 uses Babel 7 I believe) therefore the following changes need to be made: Source
- rm -rf node_modules
- rm package-lock.json
npm install --save-dev babel-jest babel-core@^7.0.0-0 @babel/core
You would also need to reconfigure the .babelrc file “env” segment to address the ‘babel-preset-env’ error. So:
"env": { "test": { "presets": [ ["@babel/env", { "targets": { "node": "current" }}] ], "plugins": [ [ "module-resolver", { "root": [ "./src" ], "alias": { "quasar": "quasar-framework/dist/quasar.mat.esm.js", "^vue$": "vue/dist/vue.common.js" } } ] ] } }
However, this results in the error:
Details: /Users/jjpro/Github/Web/ucasa/node_modules/quasar-framework/dist/quasar.mat.esm.js:23171 export default index_esm; ^^^^^^ SyntaxError: Unexpected token export > 1 | import Quasar, * as All from 'quasar' | ^ 2 | import Vuex from 'vuex' 3 | import { shallowMount, createLocalVue } from '@vue/test-utils'
So if anyone resolves this? That’d be amazing.
-
Here was what I got to get mine to work.
.babelrc
{ "presets": [ [ "@babel/preset-env", { "modules": false, "loose": false, "useBuiltIns": "usage" } ], [ "@babel/preset-stage-2", { "modules": false, "loose": false, "useBuiltIns": true, "decoratorsLegacy": true } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "polyfill": false, "regenerator": false } ] ], "comments": false, "env": { "test": { "presets": [ ["@babel/env", { "targets": { "node": "current" }}] ], "plugins": [ [ "module-resolver", { "root": [ "./src" ], "alias": { "quasar": "quasar-framework/dist/quasar.mat.esm.js", "^vue$": "vue/dist/vue.common.js" } } ] ] } } }
packages.json
"jest": { "moduleFileExtensions": [ "js", "vue" ], "collectCoverageFrom": [ "**/*.{vue}" ], "transformIgnorePatterns": [ "node_modules/core-js", "node_modules/babel-runtime", "node_modules/lodash", "node_modules/vue" ], "moduleNameMapper": { "quasar": "<rootDir>/node_modules/quasar-framework", "^src/(.*)$": "<rootDir>/src/$1", "^assets/(.*)$": "<rootDir>/src/assets/$1", "^@/(.*)$": "<rootDir>/src/components/$1", "^variables/(.*)$": "<rootDir>/src/themes/quasar.variables.sty/$1" }, "transform": { "^.+\\.js$": "<rootDir>/node_modules/babel-jest", ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" } }, "dependencies": { "@babel/runtime": "^7.0.0-beta.49", "axios": "^0.18.0", "cordova": "^8.0.0", "cordova-cli": "^1.0.0", "mediaelement": "^4.2.9", "moment": "^2.22.2", "quasar": "0.0.18", "vue": "^2.5.16", "vue-i18n": "^7.3.3", "vue-rollbar": "^0.2.2", "vue-timers": "^1.7.3", "vue-video-player": "^5.0.2", "vue-worker": "^1.2.1", "vuetify": "^1.0.19", "vuex": "^3.0.1" }, "devDependencies": { "@babel/core": "^7.0.0-beta.49", "@babel/plugin-transform-runtime": "^7.0.0-beta.49", "babel-core": "^7.0.0-beta.3", "babel-eslint": "^8.2.1", "babel-jest": "^23.0.1", "babel-plugin-module-resolver": "^3.1.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-runtime": "^6.26.0", "devtron": "^1.4.0", "electron": "^2.0.0", "electron-debug": "^1.5.0", "electron-devtools-installer": "^2.2.4", "electron-packager": "^12.1.0", "eslint": "^4.18.2", "eslint-config-standard": "^11.0.0", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^2.0.0", "eslint-plugin-import": "^2.9.0", "eslint-plugin-node": "^6.0.1", "eslint-plugin-promise": "^3.7.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.3.0", "jest": "^23.1.0", "jest-vue-preprocessor": "^1.4.0", "jsdom": "^11.11.0", "quasar-cli": "^0.16.0", "vue-jest": "^2.6.0", "vue-server-renderer": "^2.5.16" },
-
Found this issue with Jest and babel 7
babel-jest does not transpile import/export in node_modules when Babel 7 is used
-
This post is deleted! -
@jaxon did you found a solution for this? i’m stuck there as well
-
@visiond Hey Vision, unfortunately not. I’m just putting testing on ‘Ice’ tell its out of the box with the Quasar CLI, should be after v1.0 hopefully.
-
@jaxon I found the solution, in your package.json, inside
moduleNameMapper
use
"quasar": "<rootDir>/node_modules/quasar-framework/dist/umd/quasar.mat.umd.js"
Hope it helps
-
Also if someone runs into warnings like
unknown custom element: <router-link> child component
when usingq-item
with routes like<q-item to="/path"></q-item>
, a solution is to stub it to router-link and stub router links again, its hacky but it worksconst wrapper = shallowMount(MyComponent, { localVue, stubs: { 'q-item': '<router-link to=""></router-link>', RouterLink: RouterLinkStub } })
-
I’ve successfully run test with jest and Quasar 0.16 using below steps:
-
npm i --save-dev jest babel-core@7.0.0-bridge.0 @vue/test-utils
-
modify package.json:
“scripts”: {
…
“test”: “jest”
} -
modify .babelrc by adding the “env” section
{
“env”: {
“test”: {
“presets”: [ [
“@babel/preset-env”, {
“modules”: “commonjs”
}
]
]
}
},
“presets”: [
…
Test run successfully using test scripts from https://github.com/vuejs/vue-test-utils-getting-started.
-
-
This post is deleted! -
In the package.json file,
- under “jest” --> “moduleNameMapper” , I added “quasar”: “<rootDir>/node_modules/quasar-framework/dist/umd/quasar.mat.umd.js”
- under “jest” --> “transform”, I use “.*\.(vue)$”: “<rootDir>/node_modules/jest-vue-preprocessor”. I was unable to make the test run with vue-jest.
When running, npm test, I got this error
TypeError: Cannot read property 'adjustDate' of undefined 1 | import {date} from 'quasar' 2 | > 3 | const { adjustDate } = date
Does anyone know why?
Full “jest” config in package.json file
"jest": { "moduleFileExtensions": [ "js", "vue" ], "collectCoverageFrom": [ "**/*.{vue}" ], "transformIgnorePatterns": [ "node_modules/core-js", "node_modules/babel-runtime", "node_modules/lodash", "node_modules/vue" ], "moduleNameMapper": { "^src/(.*)$": "<rootDir>/src/$1", "^assets/(.*)$": "<rootDir>/src/assets/$1", "^@/(.*)$": "<rootDir>/src/components/$1", "^variables/(.*)$": "<rootDir>/src/themes/quasar.variables.sty/$1", "^vue$": "<rootDir>/node_modules/vue/dist/vue.common.js", "quasar": "<rootDir>/node_modules/quasar-framework/dist/umd/quasar.mat.umd.js" }, "transform": { "^.+\\.js$": "<rootDir>/node_modules/babel-jest", ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor" } }
-
Hi all, now that Vue CLI 3 has been released, can we solidify a testing solution with Quasar out of the box?
Thanks in advance.