Cannot mock the global $route and $router since vue-router update to v2.8.0
See original GitHub issueVersion
1.0.0-beta.13
Reproduction link
https://jsfiddle.net/getk99n0/
Steps to reproduce
- Follow the tutorial (https://vue-test-utils.vuejs.org/en/guides/using-with-vue-router.html) to mock the $route
import { shallow } from '@vue/test-utils'
describe('test', () => {
it('mock $route', () => {
const $route = { path: '/some/path' }
const wrapper = shallow(Sidebar, { mocks: { $route } }).vm
console.log(wrapper.$route)
})
})
- run the test and got undefined
What is expected?
Should get correct mock $route/$router value
What is actually happening?
Get undefined from wrapper.$route and wrapper.$router
I can still get { path: ‘/some/path’ } as result when the version of the vue-router still in v2.7.0, sorry not sure if I should raise the issue here or in vue-router, can anyone help please 😦? thanks!
NOTE that I also get this error '[vue-test-utils]: could not overwrite property $route, this usually caused by a plugin that has added the property as a read-only value'
but I didn’t use any VueRouter in my other test case includes current one.
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
[vue-test-utils] Cannot mock the global $route and $router ...
So the problem is that some where in it tests, or in a file that the tests load, I do this: Vue. use(VueRouter),...
Read more >Could not set mocks with $route in vue-test-utils - Stack Overflow
js is imported at the test.sepec.js and it interrupt the process of localVue i.e, just importing routes, which is used in global router,...
Read more >Remove existing routes · Issue #1234 · vuejs/vue-router - GitHub
I keep user configuration in the Vuex store, and when it is updated I want to completely replace whole router routes configuration (though ......
Read more >Vue Router - Vue Testing Handbook
Mocking the $route and $router global objects. Since most Vue applications use the official Vue Router, this guide will focus on that. The ......
Read more >Using Vue 3's Router in Practice - Daily.dev
This article covers some standout features of Vue Router like programmatic navigation, navigation guards, data fetching, and nested routes ...
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
Sorry, I gave you untested regex. You should update that line to this:
const srcContext = require.context('../../src/', true, /^(?!.*(?:assets|main|router)).*\.*$/)
VueRouter has been installed somewhere.
If you used Vue CLI webpack template to generate the project, the Vue Router is required before all karma tests—https://github.com/vuejs-templates/webpack/blob/develop/template/test/unit/index.js#L12
If not, make sure you aren’t importing a file in your test that imports another file that installs Vue Router.