[0.15.1] Components registering within Jest tests



  • 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



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



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