(vue-test-utils)“无法覆盖属性$route，”

Question

嗨，我正在用vue-test-utils测试vue项目。

我想做的是测试路由器(我的项目是使用VueRouter)。

我知道，如果我从路由器文件或VueRouter导入路由并将其用于localVue，则$route和$router属性是只读的，因此我无法对其进行模拟。

但当我试着

transfers.test.js

import { createLocalVue, shallowMount } from '@vue/test-utils'
// import VueRouter from 'vue-router'
// import routes from '../../router/Routes'
import ElementUI from 'element-ui'
...
const localVue = createLocalVue()
// localVue.use(VueRouter)
localVue.use(ElementUI)
localVue.use(Vuex)
localVue.component('DefaultLayout', DefaultLayout)
// const router = new VueRouter({ routes })
...

describe('Elements', () => {
  const div = document.createElement('div')
  div.id = 'root'
  document.body.appendChild(div)

  const wrapper = shallowMount(Transfers, {
    localVue,
    store,
    mocks: {
      $route: {
        params: { processing: 'failed' }
      }
    },
    // router,
    attachTo: '#root'
  })

  afterAll(() => {
    wrapper.destroy()
  })
...

console.error
      [vue-test-utils]: could not overwrite property $route, this is usually caused by a plugin that has added the property as a read-only value

就会出现。

实际上，我真正想做的不是模拟路由，而是使用真正的路由器，但是还有另一个问题。

'Route with name 'something' does not exist' vue-router console.warn when using vue-test-utils

如果您知道这些问题的解决方案，请告诉我！谢谢你提前给我。

Answer 1

我当然用这个问题的第一个答案解决了这个问题！

vue-test-utils: could not overwrite property $route, this is usually caused by a plugin that has added the property as a read-only value

似乎在任何地方使用VueRouter (甚至在非测试代码中)都会影响到模拟$route。

if (!process || process.env.NODE_ENV !== 'test') {
    Vue.use(VueRouter)
}

我在问题链接的第一个答案中用这段代码解决了问题。将此代码用于使用VueRouter的位置！