[0.15.1] Components registering within Jest tests



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



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



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


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



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



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



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



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