Testing

Jaxon

@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.

visiond

@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

visiond

Also if someone runs into warnings like unknown custom element: <router-link> child component when using q-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 works

const wrapper = shallowMount(MyComponent, {
  localVue,
  stubs: {
    'q-item': '<router-link to=""></router-link>',
    RouterLink: RouterLinkStub
  }
})

ppal

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.

april

This post is deleted!

april

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"
        }
    }

niallobrien

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.

Akaryatrh

@niallobrien https://github.com/quasarframework/quasar-testing (work in progress)

nothingismagick

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)

nothingismagick

@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!)