Testing
-
@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.
-
@niallobrien https://github.com/quasarframework/quasar-testing (work in progress)
-
You can also check out a working example as a starter kit here:
https://github.com/nothingismagick/quasar-starter-ssr-pwa-jest-cypress(with full integration of quasar components in Jest)
-
@quasar/testing is NOW beta quality and in use in a number of production projects. Requires 1.0, but everything is prerigged @Frosty-Z - check it out.
You just need to:$ quasar ext add @quasar/testing
and choose your test harnesses (currently jest, ava, cypress and webdriver are available, more to follow!)