vue-router's useRoute is not correctly mocked
See original GitHub issueDescribe the bug
When using vitest-suggested testing libraries, I can’t successfully mock useRoute and useRouter from the vue-router package.
I’m using:
- jsdom
- @testing-library/vue
Any time I run a component test with a mocked useRoute, the mock returns undefined, and Vue warns about missing injections.
...
[Vue warn]: injection "Symbol(route location)" not found.
at <HelloWorld ref="VTU_COMPONENT" >
at <VTUROOT>
...
TypeError: Cannot read properties of undefined (reading 'path')
19|
20| <div class="card">
21| <button type="button" @click="count++">count is {{ count }}</button>
| ^
22| <p>
23| Edit
Reproduction
See a minimal reproduction, using a fresh yarn create vite project here: https://github.com/hidde-jan/vitest-use-route-example/blob/main/src/components/__test__/HelloWorld.test.ts
System Info
System:
OS: macOS 12.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 76.22 MB / 32.00 GB
Shell: 3.3.1 - /opt/homebrew/bin/fish
Binaries:
Node: 16.14.0 - ~/.nodenv/versions/16.14.0/bin/node
Yarn: 1.22.15 - ~/.nodenv/versions/16.14.0/bin/yarn
npm: 8.3.1 - ~/.nodenv/versions/16.14.0/bin/npm
Browsers:
Chrome: 104.0.5112.101
Firefox: 102.0.1
Safari: 15.4
npmPackages:
@vitejs/plugin-vue: ^3.0.3 => 3.0.3
vite: ^3.0.7 => 3.0.9
vitest: ^0.22.1 => 0.22.1
### Used Package Manager
yarn
### Validations
- [X] Follow our [Code of Conduct](https://github.com/vitest-dev/vitest/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitest-dev/vitest/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitest.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/vitest-dev/vitest/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitest-dev/vitest/discussions) or join our [Discord Chat Server](https://chat.vitest.dev).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:12 (5 by maintainers)
Top Results From Across the Web
Vue-router error: TypeError: Cannot read property 'matched' of ...
I was on a tutorial and it didn't say that we must use router as the variable name. I was using Router. –...
Read more >Dynamic Route Matching with Params | Vue Router
When a route is matched, the value of its params will be exposed as this. ... this also means that the lifecycle hooks...
Read more >Waiting for the result of a Navigation - Vue Router
We need a way to detect if we actually changed the page we are on or not. Detecting Navigation Failures #. If a...
Read more >Migrating from Vue 2 - Vue Router
Vue Router is no longer a class but a set of functions. ... getMatchedComponents is now removed as matched components can be retrieved...
Read more >Getting Started - Vue Router
`<router-link>` will render an `<a>` tag with the correct `href` ... component matched by the route will render here --> <router-view></router-view> </div> ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For me this workaround doesn’t work. Current Versions: @vitejs/plugin-vue: 3.1.0 vite: 3.1.3 vitest: 0.23.4
Should be fixed by https://github.com/vitest-dev/vitest/issues/1919 and https://github.com/vitejs/vite/pull/9860
For now, you can manually add
nodecondition to your config: