使用 vue-test-utils 时，“名称为‘某物’的路由不存在"vue-router console.warn [英] 'Route with name 'something' does not exist' vue-router console.warn when using vue-test-utils

问题描述

我正在为使用 vue-test-utils 的 vue.js 组件编写测试代码.

I'm making test codes for vue.js component which uses vue-router using vue-test-utils.

这里是与此相关的代码.

Here are codes related to this.

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 上测试手表.

What I wanna do is to test watch on $route with params.

它适用于 'params: { processing: 'all' }' 但是

It works well with 'params: { processing: 'all' }' but

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

出现.

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

I can use router.push({ name: 'transfers' }) in .vue, so I think the name is registered to routes normally. But only for testing, 'Route with name 'transfers'' seems to not found.

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

The Routes.ts file originally didn't use name options for routes, but I added it since I can push params to router only using name option. I mean, name options are not necessary for our project!

所以我的问题是，

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

推荐答案

我在我从事的上一个项目中进行了大量测试.我总是嘲笑我的 $route 和 $router (见代码段).我创建了一个我正在测试的页面的 Codepen(包括整个文件).它显示了我的基本设置以及我测试路由对象的一些方法.即

I did a lot of testing in the last project I was working on. I always mocked my $route and $router (see snippet). I've created a Codepen (includes the whole file) of a page I was testing. It shows my basic setup and some ways I was testing the routing object. ie

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

在不跳入代码的情况下准确诊断您的问题有点困难，但我希望您从下面的内容中得到一些帮助.

It's a little hard to exactly diagnose your prob without jumping into the code but I hope you get something out of the below that helps you out.

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

这篇关于使用 vue-test-utils 时，“名称为‘某物’的路由不存在"vue-router console.warn的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！