Vue-Test-Utils 未知自定义元素:<router-link> [英] Vue-Test-Utils Unknown custom element: <router-link>
问题描述
我正在使用 Jest 通过 vue-test-utils 库运行我的测试.
即使我已经将 VueRouter 添加到 localVue 实例，它也说它实际上无法找到路由器链接组件.如果代码看起来有点古怪，那是因为我使用的是 TypeScript，但它应该读起来非常接近 ES6...主要是@Prop() 与传入 props 相同:{..}
Vue 组件:
<div><div class="temp"><div><router-link :to="temp.url">{{temp.name}}</router-link><script lang="ts">从'vue'导入Vue从'vue-class-component'导入组件从 'vue-property-decorator' 导入 { Prop }从 './Temp' 导入 { Temp }@零件({名称:'温度'})导出默认类 TempComponent 扩展 Vue {@Prop() 私有温度:Temp}<style lang="scss" 作用域>.temp {填充顶部:10px；}</风格>
临时模型:
export class Temp {公共静态默认值:Temp = new Temp(-1, '')公共网址:字符串构造函数(公共 ID:数字，公共名称:字符串){this.id = idthis.name = 名称this.url = '/temp/' + id}}玩笑测试
从'@vue/test-utils'导入{createLocalVue,shallow}从'@/components/Temp.vue' 导入 TempComponent从'@/components/Temp' 导入 { Temp }从 'vue-router' 导入 VueRouterconst localVue = createLocalVue()localVue.use(VueRouter)describe('Temp.vue 组件', () => {test('渲染一个路由器链接标签到 temp.url', () => {const temp = Temp.Defaulttemp.url = 'http://some-url.com'const 包装器 = 浅(临时组件，{道具数据:{临时}})const aWrapper = wrapper.find('router-link')期望((aWrapper.attributes() as any).to).toBe(temp.url)})})我错过了什么?测试实际上通过了，它只是抛出警告.事实上，这里是输出:
测试输出:
$ jest --config test/unit/jest.conf.jsPASS ClientAppcomponents\__tests__ emp.spec.tsTemp.vue 组件√ 使用 temp.url 渲染路由器链接标签(30 毫秒)console.error node_modulesvuedistvue.runtime.common.js:589[Vue 警告]:未知自定义元素:<router-link>- 你注册了吗组件正确吗?对于递归组件，请确保提供名称"选项.(在 中找到)测试套件:通过 1 个，共 1 个测试:1 次通过，共 1 次快照:共 0 个时间:4.677s运行所有测试套件.在 6.94 秒内完成. 感谢您提供的任何帮助！
将 router-link 存根添加到 shallow(或 shallowMount) 方法选项如下:
const 包装器 = 浅(TempComponent, {道具数据:{临时}，存根:['路由器链接']})或这种方式:
import { RouterLinkStub } from '@vue/test-utils';const 包装器 = 浅(临时组件，{道具数据:{临时}，存根:{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屋！
