Error while running tests in VueJS: Unknown custom element: <router-link>
When I run Karma / Jasmine tests, I get an error in the console after installing my header component which includes components <router-link>
. This all works fine, but it just can't seem like the error is being displayed. Mistake:
ERROR LOG: '[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 <Header>)'
I did the old one: Vue.use(VueRouter)
and I run"vue-router": "^2.4.0",
Any help would be much appreciated :)
SiteHeader.html
<header class="site-header">
<div class="site-header__home-btn">
<router-link to="home">Home</router-link>
</div>
<div class="site-header__info-bar">
Info bar
</div>
</header>
SiteHeader.vue
<template src="./SiteHeader.html"></template>
<style scoped lang="sass" src="./SiteHeader.scss"></style>
<script>
export default {
name: 'site-header'
}
</script>
SiteHeader.spec.js
import Vue from 'vue'
import SiteHeader from '../SiteHeader.vue'
describe('SiteHeader', () => {
/*
* Template
*
*/
describe('Template', () => {
it('should render a SiteHeader component', () => {
const vm = new Vue(SiteHeader).$mount()
expect(vm.$el).toBeTruthy()
})
})
})
Full error:
ERROR LOG: TypeError{stack: 'render@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:33404:21
_render@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:7488:26
updateComponent@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:6037:28
get@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:6348:29
Watcher@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:6331:15
mountComponent@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:6041:28
$mount@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:11131:24
$mount@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:13180:20
init@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:6810:19
createComponent@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:8535:10
createElm@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:8478:24
createChildren@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:8603:18
createElm@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:8511:23
createChildren@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:8603:18
createElm@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:8511:23
patch@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:8934:16
_update@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:5914:28
updateComponent@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:6037:17
get@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:6348:29
Watcher@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:6331:15
mountComponent@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:6041:28
$mount@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:11131:24
$mount@http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:13180:20
http://localhost:9876/base/index.js?0474196dfad39c6ebb985b02818a594daecdb5f6:42444:62
attemptSync@http://localhost:9876/absolute/Users/user/projects/project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1950:28
source to share
Amresh Venugopal is mostly right, but you also need to provide an instance with an vm
instance VueRouter
(its also important to provide a route configuration that suits your needs). Basically the problem here is caused by the router undefined
. Porper route configuration is required, otherwise you will get an error that the route is 'home'
not defined.
import Vue from 'vue'
import SiteHeader from '../SiteHeader.vue'
import VueRouter from 'vue-router'
describe('SiteHeader', () => {
/**
* Template
*
*/
describe('Template', () => {
it('should render a SiteHeader component', () => {
Vue.use(vueRouter)
const routes = { ... };
const router = new VueRouter({
routes,
// some other config
});
vm = new Vue({
template: '<div><site-header></site-header></div>',
router: router,
components: {
site-header: SiteHeader
}
}).$mount()
// some expects...
})
})
})
Hope it helps.
source to share
There is no component in the initial state <router-link>
. It comes with a plugin vue-router
. In your unit test code, the vue instance does not add the plugin vue-router
, which results in the error you are encountering.
import Vue from 'vue'
import SiteHeader from '../SiteHeader.vue'
import vueRouter from 'vue-router'
describe('SiteHeader', () => {
/**
* Template
*
*/
describe('Template', () => {
it('should render a SiteHeader component', () => {
Vue.use(vueRouter)
const vm = new Vue(SiteHeader).$mount()
expect(vm.$el).toBeTruthy()
})
})
})
You vm
should now have access to the components <router-link>
and <router-view>
.
source to share