Vue-Test-Utils未知的自定义元素:< router-link>

Vue组件: <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> 临时模型: 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 }} 开玩笑 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) })}) 我想念什么?测试实际上通过了，它只是发出警告.实际上，这是输出: 测试输出: $ jest --config test/unit/jest.conf.js PASS ClientApp\components\__tests__\temp.spec.ts Temp.vue Component √ renders a router-link tag with to temp.url (30ms) console.error node_modules\vue\dist\vue.runtime.common.js:589 [Vue warn]: Unknown custom element: <router-link> - did you register thecomponent correctly? For recursive components, make sure to provide the"name" option. (found in <Root>)Test Suites: 1 passed, 1 totalTests: 1 passed, 1 totalSnapshots: 0 totalTime: 4.677sRan all test suites.Done in 6.94s.感谢您可以提供的任何帮助！解决方案将router-link存根添加到shallow(或shallowMount)方法选项中，如下所示: const wrapper = shallow(TempComponent, { propsData: { temp }, stubs: ['router-link']}) 或以此方式: import { RouterLinkStub } from '@vue/test-utils';const wrapper = shallow(TempComponent, { propsData: { temp }, stubs: { 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 testimport { 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 ClientApp\components\__tests__\temp.spec.ts Temp.vue Component √ renders a router-link tag with to temp.url (30ms) console.error node_modules\vue\dist\vue.runtime.common.js:589 [Vue warn]: Unknown custom element: <router-link> - did you register thecomponent correctly? For recursive components, make sure to provide the"name" option. (found in <Root>)Test Suites: 1 passed, 1 totalTests: 1 passed, 1 totalSnapshots: 0 totalTime: 4.677sRan 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未知的自定义元素:&lt; router-link&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！