@quasar/testing: [Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined"
-
I have some trouble using
mountQuasar. Even if the test pass, I get an error message which I don’t understand.Here is how I get that error:
versions:
OS: Ubuntu 16.04
node: v11.12.0
npm: 6.9.0
yarn: 1.15.2
vue: 2.6.10
quasar: 1.0.0-beta.18
Create project:
$ quasar create test -b dev
accept all default choices
Add testing harness
$ quasar ext add @quasar/testing
? Please choose which testing harnesses to install:
◉ Jest Unit Testing
◯ AVA Unit Testing
◯ Cypress e2e Testing
◯ Webdriver e2e Testing
◯ Quality Testing
◯ Security Testing? Please choose how to install required babel rules: (Use arrow keys)
❯ Overwrite babel.config.js and use additional .babelrc
Do nothing, I will manage myself? Jest Unit testing will now be installed. Please choose additional options:
◉ extra “scripts” in your package.json
◉ SFC webpack <test> loader
◉ Install Wallaby.js
◉ Install Majestic UI? Overwrite “babel.config.js”?
Overwrite
❯ Overwrite all
Skip (might break extension)
Skip all (might break extension)? Overwrite “test/.gitkeep”?
Overwrite
❯ Overwrite all
Skip (might break extension)
Skip all (might break extension)
src/components/myComp.vue:
<template> <q-btn color="primary" label="myComp" /> </template> <script> export default { name: 'myComp', data () { return { myData: 0 } } } </script> <test lang="jest"> import { mountQuasar } from '../../../test/jest/utils' import myComp from '../myComp' describe('myComp', () => { const wrapper = mountQuasar(myComp) it('should pass a test', () => { expect(wrapper.vm.$data.myData).toBe(0) }) }) </test>
src/pages/index.vue:
<template> <q-page class="flex flex-center"> <my-comp /> </q-page> </template> <style> </style> <script> import myComp from '../components/myComp' export default { name: 'PageIndex', components: { myComp } } </script>
Run unit-tests:
$ quasar test --unit jest --dev
Result:
All test pass, but I get an error message:
Console:
florian@Calimero:~/Documents/softozor/test$ quasar test --unit jest --dev app:extension Running "@quasar/testing" Quasar App Extension... +0ms app:test Running "@quasar/testing" > "test" command +3ms Dev mode.......... spa Pkg quasar........ v1.0.0-beta.17 Pkg @quasar/app... v1.0.0-beta.18 Debugging......... enabled app:extension Running "@quasar/testing-unit-jest" Quasar App Extension... +0ms app:extension Running "@quasar/testing" Quasar App Extension... +3ms app:quasar-conf Reading quasar.conf.js +3ms app:dev Checking listening address availability (0.0.0.0:8080)... +2ms app:webpack Extension(@quasar/testing-unit-jest): Chaining SPA Webpack config +254ms app:webpack Extending SPA Webpack config +6ms app:generator Generating Webpack entry point +11ms app:dev-server Booting up... +2ms app:progress Compiling SPA... +110ms Created test file: myComp app:progress Compiled SPA in ~5s +5s DONE Compiled successfully in 5319ms15:43:34 N App dir........... /home/florian/Documents/softozor/test App URL........... http://localhost:8080/ Dev mode.......... spa Pkg quasar........ v1.0.0-beta.17 Pkg @quasar/app... v1.0.0-beta.18 RUN: Running unit tests with jest $ jest PASS test/jest/__tests__/App.spec.js ● Console console.log test/jest/__tests__/App.spec.js:59 formattedString 2019 April Apr 17 PASS src/components/__tests__/myComp_jest.spec.js ● Console console.error node_modules/vue/dist/vue.common.dev.js:630 [Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined" found in ---> <QAjaxBar> <Root> console.error node_modules/vue/dist/vue.common.dev.js:1893 TypeError: Cannot read property 'lang' of undefined at VueComponent.style (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:23216) at Watcher.get (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4468:25) at Watcher.evaluate (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4573:21) at Proxy.computedGetter (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4822:17) at Proxy.render (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:24525) at VueComponent.Vue._render (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:3541:22) at VueComponent.updateComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4057:21) at Watcher.get (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4468:25) at new Watcher (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4457:12) at mountComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4064:3) at VueComponent.Object.<anonymous>.Vue.$mount (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:9034:10) at VueComponent.Object.<anonymous>.Vue.$mount (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:11919:16) at init (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:3121:13) at createComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:5963:9) at createElm (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:5910:9) at Vue.patch [as __patch__] (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:6460:7) at Vue._update (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:3936:19) at Vue.updateComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4057:10) at Watcher.get (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4468:25) at new Watcher (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4457:12) at mountComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4064:3) at Vue.Object.<anonymous>.Vue.$mount (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:9034:10) at Vue.Object.<anonymous>.Vue.$mount (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:11919:16) at Object.install (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:389633) at /home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:20379 at Array.forEach (<anonymous>) at Object.install (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:20282) at Object.install (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:402395) at Function.Vue.use (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:5090:22) at Function.instance.use (/home/florian/Documents/softozor/test/node_modules/@vue/test-utils/dist/vue-test-utils.js:7141:14) at use (/home/florian/Documents/softozor/test/test/jest/utils/index.js:26:12) at Suite.<anonymous> (/home/florian/Documents/softozor/test/src/components/__tests__/myComp_jest.spec.js:5:19) at addSpecsToSuite (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/jasmine/Env.js:496:51) at Env.describe (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/jasmine/Env.js:466:11) at describe (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/jasmine/jasmineLight.js:81:18) at Object.describe (/home/florian/Documents/softozor/test/src/components/__tests__/myComp_jest.spec.js:4:1) at Runtime._execModule (/home/florian/Documents/softozor/test/node_modules/jest-runtime/build/index.js:858:13) at Runtime._loadModule (/home/florian/Documents/softozor/test/node_modules/jest-runtime/build/index.js:551:12) at Runtime.requireModule (/home/florian/Documents/softozor/test/node_modules/jest-runtime/build/index.js:415:10) at /home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:201:13 at Generator.next (<anonymous>) at asyncGeneratorStep (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:27:24) at _next (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:47:9) at /home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:52:7 at new Promise (<anonymous>) at /home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:44:12 at _jasmine (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:206:19) at jasmine2 (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:60:19) at /home/florian/Documents/softozor/test/node_modules/jest-runner/build/runTest.js:384:24 at Generator.next (<anonymous>) at asyncGeneratorStep (/home/florian/Documents/softozor/test/node_modules/jest-runner/build/runTest.js:161:24) at _next (/home/florian/Documents/softozor/test/node_modules/jest-runner/build/runTest.js:181:9) at processTicksAndRejections (internal/process/next_tick.js:81:5) ---------------|----------|----------|----------|----------|-------------------| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s | ---------------|----------|----------|----------|----------|-------------------| All files | 7.14 | 0 | 14.29 | 7.14 | | components | 100 | 100 | 100 | 100 | | myComp.vue | 100 | 100 | 100 | 100 | | layouts | 0 | 100 | 0 | 0 | | MyLayout.vue | 0 | 100 | 0 | 0 | 85,90 | pages | 0 | 100 | 100 | 0 | | Index.vue | 0 | 100 | 100 | 0 | 11 | router | 0 | 0 | 0 | 0 | | index.js | 0 | 100 | 0 | 0 | 6,14,15,25 | routes.js | 0 | 0 | 0 | 0 | 2,5,7,13,14,16 | ---------------|----------|----------|----------|----------|-------------------| Test Suites: 2 passed, 2 total Tests: 7 passed, 7 total Snapshots: 0 total Time: 2.648s Ran all test suites.What am I doing wrong ?
-
same here !
-
I have the exact same problem
-
Pinging @nothingismagick
Scott
-
Try modifying webpack settings.
// …
externals: [ ‘quasar’ ],
// … -
I have hit the same issue when testing components in my project. I can, however, mount the App without issue.
Has anyone else found a solution?
-
Looking through the stack trace I see
this.$qis undefined when the LoadingBar plugin tries to install:I’d imagine this is because the tests are using
createLocalVueand therefore Quasar ($q) has been installed on thelocalVuebut not on the instance created below:One way around this (that’s worked for me) would therefore be to
Vue.use(Quasar)to install Quasar globally before usingcreateLocalVue.However given that the installed Quasar
$qis available inLoadingBar.install, I wonder whether it can be in some way used in thenew Vueconstructor; or indeed whether thelocalVuecould be used in place of theVue(although I don’t see a readily available reference to thelocalVuewithin that scope), thereby avoiding polluting the globalVue. -
@Ed said in [@quasar/testing: [Vue warn]: Error in render: "TypeError: Cannot read property
One way around this (that’s worked for me) would therefore be to
Vue.use(Quasar)to install Quasar globally before usingcreateLocalVue.Hi @Ed, thank you its working fine with
// https://eddyerburgh.me/mock-vuex-in-vue-unit-tests export const mountQuasar = (component, options = {}) => { Vue.use(Quasar) const localVue = createLocalVue() ...What i also did in the
mountQuasarmethod is the following change:let mountFn = mount; if(options.mountFn && options.mountFn == 'shallowMount') { mountFn = shallowMount } return mountFn(component, { ...Because sometimes i want to use
mount(without child component stubs) instead ofshallowMountBest Regards,
Stefan
-
You don’t have to mount Quasar globally. This also works:
const localVue = createLocalVue() const wrapper = shallowMount( Component, //- pass the context to shallowMount, //- this will ensure that the wrapper refers to //- the instantiated localVue, //- and thus that `this.$q` is available { localVue } )
