名为“某物”的路由不存在“vue路由器控制台”。使用vue测试utils时发出警告

Question

我正在为vue编写测试代码。js组件，使用vue路由器，使用vue测试utils。

下面是与此相关的代码。

const Routes = [{
  ...
 }, ...
 {
  ...,
  path: '/transfers',
  name: 'transfers',
  redirect: '/transfers/all',
  ...
 },...]

Routes.ts

export default class Transfers extends Vue {
  ...
  @Watch('$route', { immediate: true })
  async setDataResource (value: any) {
    const routeParams = value.params
    const paramKey: string = Object.keys(routeParams)[0]
    ...
  }
}

转移。vue

import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'
import Routes from '../../router/Routes'

const localVue = createLocalVue()
localVue.use(VueRouter)
...
const router = new VueRouter({ Routes })

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

  router.push({ name: 'transfers', params: { processing: 'all' } })

  const wrapper = shallowMount(Transfers, {
    localVue,
    store,
    router,
    attachTo: '#root'
  })
  ...
})

转移。测验js

我想做的是用params在$route上测试手表。

它与'params：{处理：'all'}'配合得很好，但是

console.warn
      [vue-router] Route with name 'transfers' does not exist

出现。

我会用路由器。推入（{name:'transfers'}）。vue，因此我认为该名称通常注册到routes。但仅用于测试，似乎找不到名为“传输”的路由。

路线。ts文件最初并没有为路由使用名称选项，但我添加了它，因为我只能使用名称选项将参数推送到路由器。我的意思是，我们的项目不需要名称选项！

所以我的问题是，

• 有没有办法在测试代码中将参数推送到路由器，而不在路由中使用name选项
• 如果我应该使用name选项，为什么这个警告只在测试时出现

Answer 1

在上一个项目中，我做了很多测试。我总是嘲笑我的$路由和$路由器（参见代码片段）。我已经创建了一个我正在测试的页面的代码（包括整个文件）。它显示了我的基本设置和我测试路由对象的一些方法。即

let mocks = {
  $route: {
    path: '/some-path',
    query: {
      amount: null,
      loanType: null
    }
  },
  $router: [],
  $validator: {
    validateAll: jest.fn()
  },
  $toast: {
    show: jest.fn(),
    error: jest.fn()
  },
  $withProcessing: jest.fn()
}

要准确诊断您的问题而不跳进代码有点困难，但我希望您能从下面得到一些帮助。

https://codepen.io/RuNpiXelruN/pen/XWRKmoE