@quasar/testing (jest) components not registered when VueRouter not created



  • When I want to mock $route or $router, I can’t create a VueRouter, otherwise these are read-only props.
    https://vue-test-utils.vuejs.org/guides/#using-with-vue-router

    In test/jest/utils/index.js, mountQuasar, if I replace
    const router = new VueRouter()
    with
    const router = {}
    I’m able to change $route and $router in my test files.

    But then I get errors warnings while testing, ex:
    [Vue warn]: Unknown custom element: <q-page> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    even if they are registered in quasar.conf.js

    However the test passes. But I feel like messing up my code.

    Is there a way to properly register the components in such a case ? Or do I have to accept these warnings ?



  • Any news to this error/warning?



  • Hi, new to unit test so I lack some experience, I’m also struggling with router/q-page unit test, but seems I am able to not come across your problem, hoping will help.
    I set up the test starting from quasar doc for Jtest, so I have my "test\jest_tests_\App.spec where, this is the code ( I’ve deleted some test automatically generated by quasar cli );
    It seems I overcome your problem, still I’ve problems because using the real router instead a mock, router.js import fails because of the base dir.
    I’m look over it trying finding out how solve this problem.

    ==================
    App.spec.js

    import { mount, createLocalVue, shallowMount } from ‘@vue/test-utils’
    import QBUTTON from ‘./demo/QBtn-demo.vue’
    import * as All from ‘quasar’
    import VueRouter from ‘vue-router’
    import mypage from ‘…/…/…/src/pages/MyPage.vue’
    import routes from ‘…/…/…/src/router/routes.js’
    import App from ‘…/…/…/src/App.vue’
    // import langEn from ‘quasar/lang/en-us’ // change to any language you wish! => this breaks wallaby 😞
    const { Quasar } = All

    const components = Object.keys(All).reduce((object, key) => {
    const val = All[key]
    if (val && val.component && val.component.name != null) {
    object[key] = val
    }
    return object
    }, {})

    describe(‘Mount Quasar’, () => {
    const localVue = createLocalVue()
    localVue.use(Quasar, { components }) // , lang: langEn
    localVue.use(VueRouter)

    const wrapper = mount(QBUTTON, {
    localVue
    })
    const vm = wrapper.vm

    […]

    it(‘render MyPage via ruting’, () => {
    const router = new VueRouter({ routes })
    const wrapper = mount( App, { localVue, router })
    router.push(’/mypage’)
    expect(wrapper.findComponent(mypage).exists()).toBe(true)
    })
    })

    ====================
    router.js

    const routes = [
    {
    path: ‘/’,
    component: () => import(‘layouts/MainLayout.vue’),
    children: [
    { path: ‘’, component: () => import(‘pages/Index.vue’) },
    {
    path: ‘/mypage’,
    component: () => import(‘pages/MyPage.vue’)
    }
    ]
    },

    // Always leave this as last one,
    // but you can also remove it
    {
    path: ‘*’,
    component: () => import(‘pages/Error404.vue’)
    }
    ]

    export default routes


Log in to reply