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

Question

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

Does it work when opening it directly? (not in the test context) ? — Frnak
– Frnak, Commented Apr 11, 2017 at 11:56
Yup, works like a charm normally but just error's in test. Will add some test code up top — Dryden Williams
– Dryden Williams, Commented Apr 11, 2017 at 12:04
before you do this: const vm = new Vue(SiteHeader).$mount(), add Vue.use('vueRouter)' also add import vueRouter from 'vue-router' Does that help? — Amresh Venugopal
– Amresh Venugopal, Commented Apr 11, 2017 at 13:05

Amresh Venugopal · Accepted Answer · 2017-04-11 13:25:45Z

3

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.

answered Apr 11, 2017 at 13:25

Amresh Venugopal

9,5895 gold badges41 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Dryden Williams Over a year ago

Thanks for this! I haven't had chance to run it yet, but will approve it as soon as I do. Thanks again for the swift response 👍

Dryden Williams Over a year ago

Unfortunately 😥 this didn't working in my case. I'm going to keep investigating so will keep you posted if I find a fix that works for me.

Dryden Williams Over a year ago

I just this this one: ERROR LOG: '[Vue warn]: Error in render function: (found in <RouterLink>)' with a big stacktrace

Amresh Venugopal Over a year ago

So that means it does identify <router-link>. Can you post an image of the error?

Dryden Williams Over a year ago

Just added the error. It only error's on templates that have the router-link component in. It's super annoying as the stack trace is a whopper

|

Karol Pecio · Accepted Answer · 2017-05-27 10:30:27Z

Amresh Venugopal is mostly right, but You also need to provide vm instance with VueRouter instance (its also important to provide routes config that matches needs of ). Basically issue here is caused because router is undefined. Porper routes config is required, otherwise You will get error that 'home' route is 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 that helps.

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related