vue.jsテストでルータを嘲笑するときにvueの警告を避ける

Question

私はAxiesをHTTP要求に使用するVue.js 2アプリケーションをテストしています。これらの要求をMoxiosで嘲笑しています。このテストではAvoriazも使用しています。

私がテストしていページがちょうど要素のリストをレンダリングし、問題は、私は

のスタイルで私のテストで警告の多くを得ることである <router-link>

を使用して実装されているいくつかのボタンが表示されます

エラーログ： '[Vue警告]：不明なカスタム要素：< router-link > - コンポーネントを正しく登録しましたか？私がテストしたい

マイページ（簡体字）次のようになります。

<template> 
<div> 
    <ul> 
    <li v-for="myelement in myobject.myelements"> 
     {{myelement.id}} 
    </li> 
    </ul> 
    <router-link :to="{name: 'myElementCreate'}">New element</router-link> 
</div> 
</template> 
<script> 
import myService from './my-service.js' 

export default { 
    name: 'my-list', 
    data() { 
    return { 
     myobject: { 
     myelements: [] 
     } 
    } 
    }, 
    created() { 
    this.fetchData() 
    }, 
    methods: { 
    fetchData() { 
     if (this.$route.params.id) { 
     myService.get(this.$route.params.id) 
      .then((response) => { 
      // init data from response 
      }) 
     } 
    } 
    } 
} 
</script> 

テストは次のようになります。

import Vue from 'vue' 
import moxios from 'moxios' 
import {shallow} from 'avoriaz' 
import MyElements from '@/my-elements' 

describe('My Elements',() => { 
    beforeEach(() => { 
    moxios.install() 
    }) 

    afterEach(() => { 
    moxios.uninstall() 
    }) 

    it('Renders elements list', (done) => { 
    moxios.stubRequest(/.*/, { 
     status: 200, 
     response: existingElement 
    }) 

    // mock route to allow fetchData() to load elements 
    const component = shallow(MyElements, { 
     globals: { 
     $route: {params: {'id': 1}} 
     } 
    }) 

    moxios.wait(() => { 
     Vue.nextTick(() => { 
     try { 
      const myElement = component.find('ul li') 
      expect(myElement[0].text()).to.equal('6035132') 
     } catch (e) { 
      done(e) 
     } 
     done() 
     }) 
    }) 
    }) 
}) 

const existingElement = { 
    'id': 6035132 
} 

私はVue.use(Router)と応じて輸入、警告を追加した場合私のMoxiosモックはもはや動作しません。どのようにこれらの警告を取り除くことができますか？

Answer 1

ルータリンクがコンポーネントとして登録されていないという問題があります。

Vue Routerをインストールしないと、ルータリンクコンポーネントは登録されません。つまり、あなたのコンポーネントで使用することはできません。これは私が探していたが、それは私の心に来ていなかったからかったものだけで、

// mock component 
Vue.component('router-link', { 
    name: 'router-link', 
    render: h => h('div') 
}) 

const component = shallow(MyElements, { 
    globals: { 
    $route: {params: {'id': 1}} 
    } 
})