question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot mock the global $route and $router since vue-router update to v2.8.0

See original GitHub issue

Version

1.0.0-beta.13

Reproduction link

https://jsfiddle.net/getk99n0/

Steps to reproduce

  1. 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)
  })
})
  1. 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:closed
  • Created 5 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
eddyerburghcommented, Apr 13, 2018

Sorry, I gave you untested regex. You should update that line to this:

const srcContext = require.context('../../src/', true, /^(?!.*(?:assets|main|router)).*\.*$/)

1reaction
eddyerburghcommented, Apr 13, 2018

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found