Testing





  • @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 with module-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:

    https://github.com/quasarframework/quasar-test



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

    1. rm -rf node_modules
    2. 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"
      },
    




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



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


Log in to reply