[0.15.1] Components registering within Jest tests

Akaryatrh

Hello All!,

I have hard time migrating my unit tests from 0.14 to 0.15.1 while vue now returns warnings like:

[Vue warn]: Unknown custom element: <q-toolbar> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

Initially I was importing components on demand on my vue file, but now components can be registered on the quasar configuration file (and that’s what I did while It’s simplier). But It’s also possible to load them on demand if necessary, so I tried to do so on my test with the help of vue-test-utils:

// my-component.test.js

import Quasar, { QToolbar } from 'quasar'
import { shallow, createLocalVue } from '@vue/test-utils'
import Component from 'my-component.vue'
const localVue = createLocalVue()
localVue.use(Quasar, { QToolbar })
const wrapper = shallow(Component, {
    localVue,
    mocks: {
      $q: { theme : 'mat'} // not sure It's still necessary for 0.15
    }
})

Moreover, I had to define a moduleNameMapper for quasar in my jest.config.js file:

"moduleNameMapper": {
    "^quasar$": "<rootDir>/node_modules/quasar-framework/dist/quasar.mat.esm"
  },

But no luck, the issue remains… Any help greatly appreciated!

MusicForMellons

This post is deleted!

Akaryatrh

Anyone?

odyssianHound

@Akaryatrh did you ever find a solution to this? I am running into the same issue with quasar 15.3. I’ve tried importing the quasar components like in previous versions, but my build is having issues with the quasar moduleNameMapper you’ve listed.

odyssianHound

Anyone find a solution to this yet? I’ve tried importing the quasar components manually, but no luck

vinstah

I’ve finally cracked it after learning from different configurations in testing 0.15.x with jest

npm install babel-jest jest-vue vue-template-compiler -D

/src/tests/example.test.js

import Quasar, * as All from 'quasar'
import { shallow, createLocalVue } from '@vue/test-utils'
import { IsEmpty } from 'ipayroll-js/src/utils'
import Component from '@/pages/login.vue'

const localVue = createLocalVue()
localVue.use(Quasar, {components: All, directives: All, plugins: All})

const wrapper = shallow(Component, {
  localVue,
  mocks: {
    $isEmpty: IsEmpty
  }
})

it('Component Page test:', () => {
  expect(wrapper.isVueInstance()).toBe(true)
})

package.json

...
"jest": {
    "testMatch": [
      "<rootDir>/src/**/?(*.)(spec).js?(x)"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/src/e2e/"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "collectCoverageFrom": [
      "**/*.{vue}"
    ],
    "transformIgnorePatterns": [
      "node_modules/core-js",
      "node_modules/babel-runtime",
      "node_modules/lodash",
      "node_modules/vue"
    ],
    "coverageDirectory": "<rootDir>/src/components/coverage",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
    },
    "mapCoverage": true
  }
...

.babelrc

{
  "presets": [
    [ "env", {"modules": false} ],
    "stage-2"
  ],
  "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"
            }
          }
        ]
      ]
    }
  },
  "plugins": ["transform-runtime"],
  "comments": false
}

Akaryatrh

You rock @vinstah I’ll have a deeper look on what you did

marek.kaczkowski

@vinstah thank you! You saved my life

Is there a guide how to inject layout when my template root element is a q-page?
At the moment test yelds QPage needs to be child of QPageContainer, when I remove root q-page (so q-table is root template element) test works.

vinstah

@onrel I did have the same issue but when using shallow() from @vue/test-utils, I stopped getting that error as it wasn’t actually rendering any child components.

I am testing that my methods work with Jest and use TestCafe for UI functional testing

MusicForMellons

@vinstah Do jest snapshots work with your settings? I think vue-server-renderer needs to be installed for instance?

vinstah

Hi @MusicForMellons,
You are correct vue-server-renderer is required for snapshots, it is also needed if you use render/renderToString from @vue/server-tests-utils

vinstah

on a side note I can turn off those QPage needs to be child of QPageContainer messages by using jest --silent

MusicForMellons

@vinstah Ah, thanks. I get these error messages (and components are ‘registered’ I think…):
console.error node_modules/vue/dist/vue.common.js:593
[Vue warn]: Unknown custom element: <q-page-sticky> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

  (found in <Root>)
console.error node_modules/vue/dist/vue.common.js:593
  [Vue warn]: Unknown custom element: <q-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  
  (found in <Root>)
console.error node_modules/vue/dist/vue.common.js:593
  [Vue warn]: Unknown custom element: <q-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Jaxon

@musicformellons do you happen to have a solution for this?

MusicForMellons

@Jaxon No, sorry. I got this answer recently, but it does not answer your issue: https://stackoverflow.com/questions/49616642/jest-unit-testing-config-with-quasar-framework-0-15

I gave up on Jest for now and work happily with cypress (use it for e2e, and some unit-testing when necessary…).

Akaryatrh

@MusicForMellons @Jaxon Do you guys import your components the way @vinstah does? On my side It’s working properly:

import Quasar, * as All from 'quasar'
import { shallow, createLocalVue } from '@vue/test-utils'
const localVue = createLocalVue()

localVue.use(Quasar, {components: All, directives: All, plugins: All})

Jaxon

@akaryatrh Yeah, I switched it over using @vinstah’s method and it works!

Akaryatrh

@akaryatrh Yeah, I switched it over using @vinstah’s method and it works!

avorias5

Using the same settings as @Akaryatrh

import Quasar, * as All from 'quasar'
import { shallow, createLocalVue } from '@vue/test-utils'
import Component from '/my/Component/

const localVue = createLocalVue()
localVue.use(Quasar, {components: All, directives: All, plugins: All})

const wrapper = shallow(Component, {
  localVue
})

The problem is that the wrapper.html() now returns undefined. So wrapper.find() and wrapper.findAll() always fail.

I’ve play around with the settings and found that if I use

localVue.use(Quasar, { directives: All, plugins: All})

Without using components, the wrapper.html() would act normally.
If use components: All or components: ["A", "B" .. ], the wrapper.html() will become undefined.
However, we have to use Quasar components, otherwise Jest will throw the “component not registered correctly” error.

Does anyone facing the same problem? Can you guys successfully use wrapper.html(), wrapper.find() and wrapper.findAll() with this settings?
@vinstah @Jaxon @Akaryatrh

nothingismagick

anybody having problems resolving quasar in jest, use this:

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

No More Posting New Topics!

[0.15.1] Components registering within Jest tests