vue.js 테스트에서 라우터를 조롱 할 때 vue 경고 피하기

Question

Axies를 HTTP 요청으로 사용하는 Vue.js 2 애플리케이션을 테스트 중이며 이러한 요청을 Moxios와 조롱하고 있습니다. 이 테스트에는 Avoriaz도 사용됩니다.

난 그냥 테스트입니다 페이지 요소의 목록을 렌더링하고 <router-link>

문제를 사용하여 구현되는 일부 버튼은 내가

의 스타일로 내 테스트에서 경고를 많이 얻을 수 있다는 것입니다 표시

오류 로그 : '[Vue 경고] : 알 수없는 맞춤 요소 : < 라우터 링크 > - 구성 요소를 올바르게 등록 했습니까? 내가 테스트 할

내 페이지 (간체) 다음과 같습니다

<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)과 따라 수입, 경고를 추가하는 경우 가버 렸지만 내 모 옥스 모의는 더 이상 작동하지 않습니다. 이 경고를 없애는 방법에 대한 아이디어?

Answer 1

문제는 router-link가 구성 요소로 등록되지 않았기 때문입니다.

Vue 라우터를 설치하지 않으면 라우터 링크 구성 요소가 등록되지 않습니다. 이는 해당 구성 요소에서 사용할 수 없음을 의미합니다. 이것은 내가 찾고 있지만, 내 마음에 와서하지 않았다 조롱했다 단지 무엇인가,

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

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