I am currently creating test codes for a vue.js component that utilizes vue-router with the help of vue-test-utils.
Below are the relevant code snippets:
const Routes = [{
...
}, ...
{
...,
path: '/transfers',
name: 'transfers',
redirect: '/transfers/all',
...
},...]
Routes.ts
export default class Transfers extends Vue {
...
@Watch('$route', { immediate: true })
async setDataResource (value: any) {
const routeParams = value.params
const paramKey: string = Object.keys(routeParams)[0]
...
}
}
Transfers.vue
import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'
import Routes from '../../router/Routes'
const localVue = createLocalVue()
localVue.use(VueRouter)
...
const router = new VueRouter({ Routes })
...
describe('Elements', () => {
const div = document.createElement('div')
div.id = 'root'
document.body.appendChild(div)
router.push({ name: 'transfers', params: { processing: 'all' } })
const wrapper = shallowMount(Transfers, {
localVue,
store,
router,
attachTo: '#root'
})
...
})
transfers.test.js
My objective is to test watching $route with parameters.
Everything works fine with 'params: { processing: 'all' }' but
console.warn
[vue-router] Route with name 'transfers' does not exist
keeps popping up.
I can use router.push({ name: 'transfers' }) in .vue files, so I believe the name is correctly registered within the routes. However, during testing, it seems like 'Route with name 'transfers'' cannot be found.
The original Routes.ts file did not include a name option for routes, but I added it since I could only push parameters to the router using the name option. In other words, the name options are not essential for our project!
Therefore, my questions are as follows:
- Is there a way to push parameters to the router in test code without utilizing the name option in the route?
- If the name option is necessary, why does this warning only show up during testing?