I am currently practicing test referencing by using a mock router. Here is the code I am working with:
NestedRoute.vue
<template>
<div>
<div>Nested Route</div>
<div class="username">
{{ $route.params.username }}
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue';
import NestedRoute from './views/NestedRoute.vue';
Vue.use(Router)
export const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/nested-route', name: 'nroute', component: NestedRoute }
];
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes
})
test.spec.js
import NestedRoute from '@/views/NestedRoute.vue';
import VueRouter from 'vue-router';
import {routes} from '@/router.js'
const localVue = createLocalVue();
localVue.use(VueRouter);
describe('NestedRoute', () => {
it('renders a username from query string', () => {
const username = 'tom';
const $route = {
params: { username }
};
const wrapper = mount(NestedRoute, {
mocks: {
$route
}
});
expect(wrapper.find('.username').text()).toBe(username);
});
});
Upon running the test, I encountered the 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 valueI attempted to refer to an issue regarding 'Cannot use mocks with localVue', however, I was unable to resolve my problem. How can I effectively use a mock to utilize $route?