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

[comteharbour]

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 ?

[manubi]

Any news to this error/warning?

[a11dev]

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