Solution for Vue 3 Composition API unit test : $route is undefined in onMounted() hook
is Given Below:
I have a onMounted()
hook in my component setup()
function which access the $route.params property
, but when I mock the $route
object in my test, $route
is undefined
in the onMounted()
hook, hence throwing an error. Here’s the code
Component.vue :
<template>
<div>{{ this.$route.params.id }}</div>
</template>
<script lang="ts">
import {defineComponent, onMounted} from 'vue'
import {useRoute} from "vue-router";
export default defineComponent({
name: 'Component',
setup() {
const route = useRoute()
onMounted(() => {
console.log(route.params.id)
})
return {}
}
})
</script>
Component.spec.ts :
import {mount} from "@vue/test-utils";
import Component from "@/views/Bundle/Component.vue";
test('test description', async () => {
const mockRoute = {
params: {
id: 1
}
}
const mockRouter = {
push: jest.fn()
}
const wrapper = mount(Component, {
global: {
mocks: {
$route: mockRoute,
$router: mockRouter
}
}
})
await wrapper.find('button').trigger('click')
})
Error thrown:
TypeError: Cannot read property ‘params’ of undefined
I’m using version 2.0.0-rc.12 of vue-test-utils.
Any help would be much appreciated