在VueJS中运行测试时出错：未知的自定义元素：<router-link>

Question

当我运行Karma / Jasmine测试时，在安装包含<router-link>组件的标头组件之后，控制台中将显示错误日志。一切运行正常，但似乎无法修复显示的错误。错误是：

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>)'

我已经做旧了，Vue.use(VueRouter)并且正在跑步"vue-router": "^2.4.0",

任何帮助将非常感激

---

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()
   })
 })
})

完全错误：

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

Answer 1

Amresh Venugopal 大部分是正确的，但是您还需要提供vm实例与VueRouter实例（提供匹配需求的路由配置也很重要）。基本上这里的问题是因为路由器引起的undefined。需要正确的路由配置，否则您将收到'home'路由未定义的错误。

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...
    })
  })
})

希望有帮助。