When I run my Karma/Jasmine tests I get a Error Log in the console after mounting my header component which include <router-link>
components. It all run's perfectly fine but just can't seem fix the error that displays. The error is:
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 have done the old: Vue.use(VueRouter)
and am running "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
const router = new VueRouter({ routes: [ { path: '/home', component: { template: '<h1>Home</h1>' } }, { path: '/about', component: { template: '<h1>About Us</h1>' } } ] }); const app = new Vue({ router, template: ` <div id="rendered-content"> <div> <router-link to="/home">Home</router-link> <router-link to="/about"> ...
It's not possible to use vue-router@4 with vue@2 . They're incompatible with each other.
Most of our applications are driven by multiple views and some kind of navigation. This is where Vue Routing comes in. It allows you to build the kinds of apps you need to create.
Vue natively doesn't have the <router-link>
component. It comes along with the vue-router
plugin. In your unit-test code, the vue instance doesn't have the vue-router
plugin added, leading to the error you are facing.
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()
})
})
})
Now the vm
should have access to the <router-link>
and <router-view>
components.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With