Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error when running tests in VueJS: Unknown custom element: <router-link>

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
like image 641
Dryden Williams Avatar asked Apr 11 '17 10:04

Dryden Williams


People also ask

How do I link my router to Vue?

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"> ...

Does Vue router 4 work with Vue 2?

It's not possible to use vue-router@4 with vue@2 . They're incompatible with each other.

Does Vue support routing?

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.


1 Answers

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.

like image 57
Amresh Venugopal Avatar answered Sep 21 '22 18:09

Amresh Venugopal