Testing



  • 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