Testing



  • @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 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
      }
    })


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





  • 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)