Vue-Test-Utils 未知的自定义元素:<router-link> [英] Vue-Test-Utils Unknown custom element: <router-link>

问题描述

我正在使用 Jest 通过 vue-test-utils 库运行我的测试.

尽管我已将 VueRouter 添加到 localVue 实例，但它说它实际上无法找到路由器链接组件.如果代码看起来有点古怪，那是因为我使用的是 TypeScript，但它应该读起来非常接近 ES6……主要是 @Prop() 与传入 props 相同:{..}

Vue 组件:

<template>
<div 类="临时">
<router-link :to="temp.url">{{temp.name}}</router-link></div></div></div></模板><脚本 lang="ts">从 'vue' 导入 Vue从'vue-class-component'导入组件从 'vue-property-decorator' 导入 { Prop }从 './Temp' 导入 { Temp }@零件({名称:'温度'})导出默认类 TempComponent 扩展 Vue {@Prop() 私有温度:温度}</脚本><style lang="scss" 作用域>.temp {上边距:10px；}</风格>

临时模型:

export class Temp {公共静态默认值:Temp = new Temp(-1, '')公共网址:字符串构造函数(公共 ID:数字，公共名称:字符串){这个.id = idthis.name = 名称this.url = '/temp/' + id}}

开玩笑测试

import { createLocalVue, shallow } from '@vue/test-utils'从@/components/Temp.vue"导入 TempComponent从@/components/Temp"导入 { Temp }从 'vue-router' 导入 VueRouterconst localVue = createLocalVue()localVue.use(VueRouter)describe('Temp.vue 组件', () => {test('用 to temp.url 渲染一个路由器链接标签', () => {const temp = Temp.Defaulttemp.url = 'http://some-url.com'const wrapper = shallow(TempComponent, {道具数据:{临时}})const aWrapper = wrapper.find('router-link')expect((aWrapper.attributes() as any).to).toBe(temp.url)})})

我错过了什么?测试实际上通过了，它只是抛出警告.事实上，这里是输出:

测试输出:

$ jest --config test/unit/jest.conf.js通过 ClientAppcomponents\__tests__	emp.spec.tsTemp.vue 组件√ 用 temp.url (30ms) 渲染一个 router-link 标签console.error node_modulesvuedistvue.runtime.common.js:589[Vue 警告]:未知的自定义元素:<router-link>- 你注册了吗组件正确吗?对于递归组件，请确保提供名称"选项.(在 <Root> 中找到)测试套件:1 个通过，共 1 个测试:1 通过，共 1快照:共 0 个时间:4.677s运行所有测试套件.在 6.94 秒内完成.

感谢您提供的任何帮助！

解决方案

将 router-link 存根添加到 shallow(或 shallowMount) 方法选项如下:

const wrapper = shallow(TempComponent, {道具数据:{临时}，存根:['路由器链接']})

或这样:

import { RouterLinkStub } from '@vue/test-utils';const wrapper = shallow(TempComponent, {道具数据:{临时}，存根:{RouterLink:RouterLinkStub}})

执行此操作后，错误应该会消失.

I'm using Jest to run my tests utilizing the vue-test-utils library.

Even though I've added the VueRouter to the localVue instance, it says it can't actually find the router-link component. If the code looks a little funky, it's because I'm using TypeScript, but it should read pretty close to ES6... Main thing is that the @Prop() is the same as passing in props: {..}

Vue component:

<template>
  <div>
    <div class="temp">
      <div>
        <router-link :to="temp.url">{{temp.name}}</router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'
import { Temp } from './Temp'

@Component({
  name: 'temp'
})
export default class TempComponent extends Vue {
  @Prop() private temp: Temp
}
</script>

<style lang="scss" scoped>
.temp {
  padding-top: 10px;
}
</style>

Temp model:

export class Temp {
  public static Default: Temp = new Temp(-1, '')

  public url: string

  constructor(public id: number, public name: string) {
    this.id = id
    this.name = name
    this.url = '/temp/' + id
  }
}

Jest test

import { createLocalVue, shallow } from '@vue/test-utils'
import TempComponent from '@/components/Temp.vue'
import { Temp } from '@/components/Temp'
import VueRouter from 'vue-router'

const localVue = createLocalVue()
localVue.use(VueRouter)

describe('Temp.vue Component', () => {
  test('renders a router-link tag with to temp.url', () => {
    const temp = Temp.Default
    temp.url = 'http://some-url.com'

    const wrapper = shallow(TempComponent, {
      propsData: { temp }
    })
    const aWrapper = wrapper.find('router-link')
    expect((aWrapper.attributes() as any).to).toBe(temp.url)
  })
})

What am I missing? The test actually passes, it just throws the warning. In fact, here is the output:

Test Output:

$ jest --config test/unit/jest.conf.js
 PASS  ClientAppcomponents\__tests__	emp.spec.ts
  Temp.vue Component
    √ renders a router-link tag with to temp.url (30ms)

  console.error node_modulesvuedistvue.runtime.common.js:589
    [Vue warn]: Unknown custom element: <router-link> - did you register the 
component correctly? For recursive components, make sure to provide the 
"name" option.

    (found in <Root>)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.677s
Ran all test suites.
Done in 6.94s.

Appreciate any help you can give!

解决方案

Add the router-link stub to the shallow (or shallowMount) method options like this:

const wrapper = shallow(TempComponent, {
     propsData: { temp },
     stubs: ['router-link']
})

or this way:

import { RouterLinkStub } from '@vue/test-utils';

const wrapper = shallow(TempComponent, {
     propsData: { temp },
     stubs: {
         RouterLink: RouterLinkStub
     }
})

The error should go away after you do this.

这篇关于Vue-Test-Utils 未知的自定义元素:<router-link>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！