Vue-Test-Utils Unknown custom element: <router-link>
14,078
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.
Comments
-
Chad Carter almost 2 years
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 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 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!
-
Michael Yaworski almost 6 yearsSecond way worked for me. The
html()
function returned<!---->
wherever I was using<router-link...
. After using alocalVue
andRouterLinkStub
, it rendered my<router-link...
properly to the<a...
so that I could test the existence and values for data inside the<router-link
. The OP was trying to usewrapper.find('router-link')
and I don't think this answer solves that problem. But it solved mine, which was a similar one. -
Marcelo Fonseca about 4 yearsThis is not working in version 1.0.0-beta.11. For what version is this solution?
-
MiniGod about 4 yearsIs there a way to make the test fail instead of outputting the warning message?
-
MA Deldari over 2 yearsalso can use const wrapper = mount(Status, { stubs: ['router-link'] })