Docs: Provide an example of useRoute() with vue router 4.x to access route params
natemate90 opened this issue · 4 comments
natemate90 commented
I'm trying to mock the vue-router useRoute() function.
Test should pass as I mock useRoute inside vue-router, but instead the test fails:
FAIL src/components/base/sidebar/SidebarMenu.spec.ts (9.592 s)
● Console
console.warn
[Vue warn]: injection "Symbol([vue-router]: route location)" not found.
at <Anonymous ref="VTU_COMPONENT" >
at <VTUROOT>
22 | import { useRoute } from 'vue-router'
23 |
> 24 | const route = useRoute()
| ^
25 |
26 | const { helplinks, navigation } = useSidebarLinks(route)
27 | </script>
at warn (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6800:17)
at Object.inject (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1508:13)
at Object.useRoute (node_modules/vue-router/dist/vue-router.cjs.js:3406:16)
at setup (src/components/base/sidebar/SidebarMenu.vue:24:15)
at callWithErrorHandling (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6917:22)
at setupStatefulComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6535:29)
at setupComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6491:11)
at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4369:13)
console.warn
[Vue warn]: Unhandled error during execution of setup function
at <Anonymous ref="VTU_COMPONENT" >
at <VTUROOT>
at warn (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6800:17)
at logError (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6974:9)
at handleError (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6966:5)
at callWithErrorHandling (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6920:9)
at setupStatefulComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6535:29)
at setupComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6491:11)
at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4369:13)
at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4344:17)
Related information:
@testing-library/vue
version:Vue
version: 3.2.2node
version: 16.5.0npm
(oryarn
) version: 7.19.1
Relevant code or config (if any)
beforeEach(() => {
jest.mock('vue-router', () => ({
useRoute: () => ({
params: {
locale: 'en',
id: '123abc'
}
})
}))
})
Additional context
sand4rt commented
@natemate90 You can find an example here
natemate90 commented
This shows an example of Vue Router with Vue 2. I'm looking for the Vue Router 4.x (with Vue 3)
natemate90 commented
I created a minimal reproduction example for my problem. I have 2 Files
- ComponentWithUseRoute.vue
- ComponentWithUseRoute.spec.ts
ComponentWithUseRoute.vue:
<template>
<div>{{ route.params }}</div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>
ComponentWithUseRoute.spec.ts
import { render } from '@testing-library/vue'
import ComponentWithUseRoute from './ComponentWithUseRoute.vue'
beforeEach(() => {
jest.mock('vue-router', () => ({
useRoute: jest.fn(() => ({
name: 'Home',
params: {
lang: 'en'
}
}))
}))
})
test('It shows the route params', async () => {
render(ComponentWithUseRoute)
})
The test fails:
● It shows the route params
TypeError: Cannot read property 'params' of undefined
at Proxy.render (src/tests/useRoute/ComponentWithUseRoute.vue:31:105)
at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:759:44)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4475:57)
at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:164:29)
at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4600:9)
at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4386:9)
at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4344:17)
at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3949:21)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4482:21)
at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:164:29)
at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4600:9)
at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4386:9)
at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4344:17)
at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3949:21)
at render (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5081:13)
at mount (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3467:25)
at Object.app.mount (node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1495:23)
at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7833:18)
at Object.render (node_modules/@testing-library/vue/dist/render.js:45:38)
at src/tests/useRoute/ComponentWithUseRoute.spec.ts:17:3
at step (src/tests/useRoute/ComponentWithUseRoute.spec.ts:33:23)
at Object.next (src/tests/useRoute/ComponentWithUseRoute.spec.ts:14:53)
at src/tests/useRoute/ComponentWithUseRoute.spec.ts:8:71
at Object.<anonymous>.__awaiter (src/tests/useRoute/ComponentWithUseRoute.spec.ts:4:12)
at Object.<anonymous> (src/tests/useRoute/ComponentWithUseRoute.spec.ts:16:35)
console.warn
[Vue warn]: injection "Symbol([vue-router]: route location)" not found.
at <Anonymous ref="VTU_COMPONENT" >
at <VTUROOT>
5 | <script lang="ts" setup>
6 | import { useRoute } from 'vue-router'
> 7 | const route = useRoute()
| ^
8 | </script>
9 |
at warn (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6800:17)
at Object.inject (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1508:13)
at Object.useRoute (node_modules/vue-router/dist/vue-router.cjs.js:3406:16)
at setup (src/tests/useRoute/ComponentWithUseRoute.vue:7:15)
at callWithErrorHandling (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6917:22)
at setupStatefulComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6535:29)
at setupComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6491:11)
console.warn
[Vue warn]: Unhandled error during execution of render function
at <Anonymous ref="VTU_COMPONENT" >
at <VTUROOT>
at warn (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6800:17)
at logError (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6974:9)
at handleError (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6966:5)
at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:876:9)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4475:57)
at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:164:29)
at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4600:9)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 7.157 s
Ran all test suites related to changed files.
Watch Usage: Press w to show more.
@afontcu any chance you can create a working example? 🙏 😄
natemate90 commented
Solution: It appeared to be as simple as removing foreach
ComponentWithUseRoute.spec.ts
import { render } from '@testing-library/vue'
import ComponentWithUseRoute from './ComponentWithUseRoute.vue'
jest.mock('vue-router', () => ({
useRoute: jest.fn(() => ({
name: 'Home',
params: {
lang: 'en'
}
}))
}))
test('It shows the route params', async () => {
render(ComponentWithUseRoute)
})