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

Question

当我运行我的 Karma/Jasmine 测试时，我在安装我的 header 组件（其中包括 <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

Vue 本身没有 <router-link> 组件。它与 vue-router 插件一起提供。在您的单元测试代码中，vue 实例没有添加 vue-router 插件，导致您遇到的错误。

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

现在 vm 应该可以访问 <router-link> 和 <router-view> 组件。

Answer 2

Amresh Venugopal 大部分是正确的，但您还需要提供 vm 实例和 VueRouter 实例（提供符合需要的路由配置也很重要）。基本上这里的问题是因为路由器是 undefined。 Porper routes config 是必需的，否则你会得到 '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...
    })
  })
})

希望对您有所帮助。

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

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

jasmine

karma-runner

vue.js

vuejs2

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

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

jasmine

karma-runner

vue.js

vuejs2

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