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

[cherry200604]

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)
  })
})

2. 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.

[eddyerburgh]

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.

[cherry200604]

Hi @eddyerburgh
I'm sure the only place I use the VueRouter is in my router/index.js

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home
  }
]

export default new VueRouter({
  routes,
  linkExactActiveClass: 'active',
  scrollBehavior: function (to, from, savedPosition) {
    return savedPosition || { x: 0, y: 0 }
  }
})

and main.js import the router

main.js

import Vue from 'vue'
import { sync } from 'vuex-router-sync'
import router from './router'
import store from './store'

Vue.component('mycom', Component)
... (other components)

Vue.use(ElementUI)
... (other plugins)

sync(store, router)

new Vue({
  el: '#root',
  router: router,
  store: store,
  render: h => h(...)
})

and my test/index.js

import Vue from 'vue'

Vue.config.productionTip = false

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src/', true, /^(?!.*(?:assets|main.js$)).*\.*$/)
srcContext.keys().forEach(srcContext)

The most things that I curious is why it works good on v2.7.0 but failed on v2.8.0... didn't see breaking changes between these two versions...

[eddyerburgh]

The test/index.js file is requiring the router/index.js that installs Vue Router

Change this line in test/index.js:

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

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

[cherry200604]

Hello @eddyerburgh
First, thank you for replying again, I tried to update the line in test/index.js to
const srcContext = require.context('../../src/', true, /^(?!.*(?:assets|main.js$|router\/index.js)).*\.*$/)
this but still not work..

At the beginning, I use VueRouter in my main.js like this

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import { sync } from 'vuex-router-sync'
import routes from './routes'
import store from './store'

Vue.component('mycom', Component)
... (other components)

Vue.use(ElementUI)
Vue.use(VueRouter)
... (other plugins)

const router = new VueRouter({
  routes: routes,
  // mode: 'history',
  linkExactActiveClass: 'active',
  scrollBehavior: function (to, from, savedPosition) {
    return savedPosition || { x: 0, y: 0 }
  }
})

sync(store, router)

new Vue({
  el: '#root',
  router: router,
  store: store,
  render: h => h(...)
})

routes.js

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home
  }
]

export default routes

and the line in test/index.js is const srcContext = require.context('../../src/', true, /^(?!.*(?:assets|main.js$)).*\.*$/)

It doesn't work, so I changed it to the above one... but it still failed :(

[eddyerburgh]

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

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

[cherry200604]

@eddyerburgh
Yes, I found my stupid error on the regex yesterday too, it resolved my problem, thank you for so kindly to help me 😄 !!!

Thank you so much!!!!