Testing

mateuo

I am trying to test with webpack-karma, I tried some configurations and now I am stucked here:
…
[122] ./node_modules/util/node_modules/inherits/inherits_browser.js 672 bytes {0} [built]
+ 108 hidden modules

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue
Module not found: Error: Can’t resolve ‘quasar’ in ‘/home/mateu/VueProjects/sails1/cima20js/assets/frontend/src/components’
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue 3:0-203
@ ./src/components/Hello.vue
@ ./src/test/components/hello.Spec.coffee

ERROR in ./src/test/components/hello.Spec.coffee
Module not found: Error: Can’t resolve ‘quasar’ in ‘/home/mateu/VueProjects/sails1/cima20js/assets/frontend/src/test/components’
@ ./src/test/components/hello.Spec.coffee 3:0-27
24 08 2017 06:01:03.673:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
24 08 2017 06:01:03.674:INFO [launcher]: Launching browsers PhantomJS, Firefox with unlimited concurrency
24 08 2017 06:01:03.724:INFO [launcher]: Starting browser PhantomJS
24 08 2017 06:01:03.739:INFO [launcher]: Starting browser Firefox
24 08 2017 06:01:04.101:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket vhe0wjpMOy2tMBa0AAAA with id 74984205
24 08 2017 06:01:05.869:INFO [Firefox 55.0.0 (Ubuntu 0.0.0)]: Connected on socket 5AWcaU3_5W61T549AAAB with id 91018619

Thank you for your help.
By the way, thankyou for made quasar possible is what I was waiting for
Mateu

Kais

Hello There Quasar Community
I was working the last days integrating some Testing for Quasar Framwork, I Know there is some difficulties there, This is a little project am sharing with you guys, Your comments, I’ll be very happy to hear them thanks
https://github.com/KaisNeffati/VueJSQuasarTesting
Sincerly

pinghe

vue-test-utils is the official test library for Vue.js :
https://github.com/vuejs/vue-test-utils
https://vue-test-utils.vuejs.org/en/
https://github.com/vuejs/vue-test-utils-mocha-webpack-example

Adam P.

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

marek.kaczkowski

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)

nothingismagick

@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

Jaxon

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

Jaxon

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

rm -rf node_modules
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.

vantage_saunders

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

Rick

Found this issue with Jest and babel 7

babel-jest does not transpile import/export in node_modules when Babel 7 is used

visiond

This post is deleted!

visiond

@jaxon did you found a solution for this? i’m stuck there as well

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)

No More Posting New Topics!

Testing