使用 vue-test-utils 时，'名称为'某物'的路由不存在' vue-router console.warn

Question

我正在使用 vue-test-utils 为使用 vue-router 的 vue.js 组件制作测试代码。

这里是与此相关的代码。

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]
    ...
  }
}

Transfers.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'
  })
  ...
})

transfers.test.js

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

它与 'params: { processing: 'all' }' 配合得很好，但是

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

出现。

我可以在 .vue 中使用 router.push({ name: 'transfers' }) ，所以我认为该名称已正常注册到路由。但仅用于测试，'Route with name 'transfers'' 似乎没有找到。

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

所以我的问题是，

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

Answer 1

我在上一个项目中做了很多测试。我总是嘲笑我的 $route 和 $router（参见 sn-p）。我已经为我正在测试的页面创建了一个 Codepen（包括整个文件）。它显示了我的基本设置以及我测试路由对象的一些方法。即

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