Greetings! I am currently in the process of testing a Vue project using vue-test-utils.
My main focus is on testing the router functionality, as my project utilizes VueRouter.
I have encountered an issue where the $route and $router properties are read-only when imported from the router file or VueRouter and used with localVue, making it impossible to mock them.
In my attempts to address this problem...
The code snippet below shows my approach:
import { createLocalVue, shallowMount } from '@vue/test-utils'
// import VueRouter from 'vue-router'
// import routes from '../../router/Routes'
import ElementUI from 'element-ui'
...
const localVue = createLocalVue()
// localVue.use(VueRouter)
localVue.use(ElementUI)
localVue.use(Vuex)
localVue.component('DefaultLayout', DefaultLayout)
// const router = new VueRouter({ routes })
...
describe('Elements', () => {
const div = document.createElement('div')
div.id = 'root'
document.body.appendChild(div)
const wrapper = shallowMount(Transfers, {
localVue,
store,
mocks: {
$route: {
params: { processing: 'failed' }
}
},
// router,
attachTo: '#root'
})
afterAll(() => {
wrapper.destroy()
})
...
console.error
[vue-test-utils]: could not overwrite property $route, this is usually caused by a plugin that has added the property as a read-only value
This error message is displayed during the testing process.
I aim to utilize the real router instead of mocking the route, but another obstacle arises...
'Route with name 'something' does not exist' vue-router console.warn when using vue-test-utils
If you have any solutions to these challenges, kindly share your insights. Your assistance is greatly appreciated!