3. Testing

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.

    0
    V
     1 Reply
  • V

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

    0
  • V

    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
  }
})
    0
  • P

    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.

    1
    A
     1 Reply
  • A

    This post is deleted!
    0
  • A

    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"
        }
    }
    0
  • N

    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.

    1

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

    1

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

    1

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

    1