Testing: component instantiation problems

We commented it through discord.

I reproduced a weird behaviour when initializing components for testing where if I recreated a new component for every test, quasar was not correctly initialized for the consecutive tests. The first one would pass and the rest of them fail (being exactly the same test).

I have created a repo that reproduces the situation

Software version

Operating System - Windows_NT(10.0.16299) - win32/x64 NodeJs - 10.15.2

Global packages

NPM - 6.4.1 yarn - 1.12.3 @quasar/cli - 1.0.0-beta.4 cordova - Not installed

Important local packages

quasar - 1.0.0-beta.15 – High performance, Material Design 2, full front end stack with Vue.js – build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase @quasar/app - 1.0.0-beta.15 – Quasar Framework App CLI @quasar/extras - 1.1.1 – Quasar Framework fonts, icons and animations vue - 2.6.10 – Reactive, component-oriented view layer for modern web interfaces. vue-router - 3.0.2 – Official router for Vue.js 2 vuex - 3.1.0 – state management for Vue.js electron - Not installed electron-packager - Not installed electron-builder - Not installed @babel/core - 7.3.4 – Babel compiler core. webpack - 4.29.6 – Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, … and your custom stuff. webpack-dev-server - 3.2.1 – Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - 4.1.1 – A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache. register-service-worker - 1.6.2 – Script for registering service worker, with hooks

Quasar App Extensions

@quasar/quasar-app-extension-testing-unit-jest - 1.0.0-beta.22 – A Quasar App Extension for running Jest tests @quasar/quasar-app-extension-testing - 1.0.0-rc.5 – A Quasar App Extension for managing Test Harnesses

What did you get as the error?

PS C:\Fuentes\GIT\quasar-testing> npm run test:unit

> quasar-testing@0.0.1 test:unit C:\Fuentes\GIT\quasar-testing
> jest --updateSnapshot

 PASS  test/jest/__tests__/App.spec.js
  ● Console

    console.log test/jest/__tests__/App.spec.js:59
      formattedString 2019 April Apr 10

 FAIL  src/pages/__tests__/Index.spec.js
  ● Console

    console.error node_modules/vue/dist/vue.common.dev.js:630
      [Vue warn]: Unknown custom element: <q-page> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
      
      found in
      
      ---> <PageIndex>
             <Root>
    console.error node_modules/vue/dist/vue.common.dev.js:630
      [Vue warn]: Unknown custom element: <q-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
      
      found in
      
      ---> <PageIndex>
             <Root>
    console.error node_modules/vue/dist/vue.common.dev.js:630
      [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'localStorage' of undefined"
      
      found in
      
      ---> <PageIndex>
             <Root>
    console.error node_modules/vue/dist/vue.common.dev.js:1893
      TypeError: Cannot read property 'localStorage' of undefined
          at VueComponent.mounted (C:\Fuentes\GIT\quasar-testing\src\pages\index.vue:579:38)
          at invokeWithErrorHandling (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:1859:57)
          at callHook (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:4210:7)
          at Object.insert (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:3142:7)
          at invokeInsertHook (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:6331:28)
          at VueComponent.patch [as __patch__] (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:6548:5)
          at VueComponent.Vue._update (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:3936:19)
          at VueComponent.updateComponent (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:4057:10)
          at Watcher.get (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:4468:25)
          at new Watcher (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:4457:12)
          at mountComponent (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:4064:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:9034:10)
          at VueComponent.Object.<anonymous>.Vue.$mount (C:\Fuentes\GIT\quasar-testing\node_modules\vue\dist\vue.common.dev.js:11919:16)
          at mount (C:\Fuentes\GIT\quasar-testing\node_modules\@vue\test-utils\dist\vue-test-utils.js:8649:21)
          at mountComponent (C:\Fuentes\GIT\quasar-testing\test\jest\utils\testCommon.js:66:12)
          at mountComponent (C:\Fuentes\GIT\quasar-testing\test\jest\utils\testCommon.js:40:10)
          at Object.<anonymous> (C:\Fuentes\GIT\quasar-testing\src\pages\__tests__\Index.spec.js:36:17)
          at Object.asyncJestLifecycle (C:\Fuentes\GIT\quasar-testing\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:53:37)
          at resolve (C:\Fuentes\GIT\quasar-testing\node_modules\jest-jasmine2\build\queueRunner.js:43:12)
          at new Promise (<anonymous>)
          at mapper (C:\Fuentes\GIT\quasar-testing\node_modules\jest-jasmine2\build\queueRunner.js:26:19)
          at promise.then (C:\Fuentes\GIT\quasar-testing\node_modules\jest-jasmine2\build\queueRunner.js:73:41)
          at process._tickCallback (internal/process/next_tick.js:68:7)

  ● Dashboard designer page tests › passes the sanity check to see if at least is a Vue instance2 

    TypeError: Cannot read property 'localStorage' of undefined



      at VueComponent.mounted (src/pages/index.vue:579:38)
      at invokeWithErrorHandling (node_modules/vue/dist/vue.common.dev.js:1859:57)
      at callHook (node_modules/vue/dist/vue.common.dev.js:4210:7)
      at Object.insert (node_modules/vue/dist/vue.common.dev.js:3142:7)
      at invokeInsertHook (node_modules/vue/dist/vue.common.dev.js:6331:28)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.common.dev.js:6548:5)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.common.dev.js:3936:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.common.dev.js:4057:10)
      at Watcher.get (node_modules/vue/dist/vue.common.dev.js:4468:25)
      at new Watcher (node_modules/vue/dist/vue.common.dev.js:4457:12)
      at mountComponent (node_modules/vue/dist/vue.common.dev.js:4064:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.common.dev.js:9034:10)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.common.dev.js:11919:16)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:8649:21)
      at mountComponent (test/jest/utils/testCommon.js:66:12)
      at mountComponent (test/jest/utils/testCommon.js:40:10)
      at Object.<anonymous> (src/pages/__tests__/Index.spec.js:36:17)

---------------|----------|----------|----------|----------|-------------------|
File           |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
---------------|----------|----------|----------|----------|-------------------|
All files      |    52.78 |       40 |    30.77 |    46.67 |                   |
 boot          |        0 |      100 |        0 |        0 |                   |
  axios.js     |        0 |      100 |        0 |        0 |                 4 |
  i18n.js      |        0 |      100 |        0 |        0 |               5,8 |
 i18n          |        0 |        0 |        0 |        0 |                   |
  index.js     |        0 |        0 |        0 |        0 |                   |
 i18n/en-us    |        0 |        0 |        0 |        0 |                   |
  index.js     |        0 |        0 |        0 |        0 |                   |
 layouts       |        0 |      100 |        0 |        0 |                   |
  MyLayout.vue |        0 |      100 |        0 |        0 |             85,90 |
 pages         |    90.48 |       50 |       80 |    93.33 |                   |
  Index.vue    |    90.48 |       50 |       80 |    93.33 |                36 |
 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: 1 failed, 1 passed, 2 total
Tests:       1 failed, 7 passed, 8 total
Snapshots:   0 total
Time:        5.389s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! quasar-testing@0.0.1 test:unit: `jest --updateSnapshot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the quasar-testing@0.0.1 test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

What were you expecting?

I expect to have the same behaviour instantiating the component for every test or once for all the test set.

What steps did you take, to get the error?

The repo explains how it is created: https://github.com/Abuntxa/quasar-testing

[mike1e]

You will need to import quasar into either webpack, babel, or jest.

In the jest.config.js file

Add

  moduleNameMapper: {
    quasar: "quasar-framework/dist/umd/quasar.mat.umd.min.js"
  },

[rabbiveesh]

Hey, I’ve been having this issue also.

What I did is I installed Quasar on the global vue object, seeing as all of my components use Quasar components and stuff. Simple as

import Vue from 'vue'
// 'Quasar' and 'components' defined as usual
Vue.use(Quasar, { components })

This works b/c localVue copies over all of the things from the global vue. I’ll post here again if I have issues as a result of my workaround.