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

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路由配置，否则您将收到'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...
    })
  })
})

希望有所帮助。

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

2 个答案: