[0.15.1] Components registering within Jest tests



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


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



  • @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…).



  • @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})
    


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



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

    👍



  • 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



  • anybody having problems resolving quasar in jest, use this:

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


  • This conversation is no longer applicable to testing in 1.0.

    If you are reading this, please use $ quasar ext add @quasar/testing and install the prerigged jest harness that way.



  • For anyone else coming across this in a 1.0 world, the mapping has changed to (made it work for me, anyway):

    "moduleNameMapper": {
      "quasar": "quasar/dist/quasar.umd.min.js"
      ...

Log in to reply