카르마 유닛 테스트에서 VueRouter가 정의되지 않았습니다.

Question

새 Vue.js 프로젝트에서 테스트를 실행하는 동안 경고가 표시됩니다. 웹팩을 기반으로

ERROR LOG: '[Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined" 

found in 

---> <RouterLink> 
    <Root>' 

내가 Vue2을 사용하고

프로젝트 : 구성 요소는 프로그래밍 방식 this.$router.push('/');

으로 테스트는 이러한 경고를 전달하지만, 로그인되어 <router-link> 또는으로 템플릿에 라우터 중 하나를 사용하여 어디든지 프로젝트가 cli 도구로 생성됩니다.

내 단위 테스트하는 index.js :

import Vue from 'vue'; 
import VueNativeSock from 'vue-native-websocket'; 
import Router from 'vue-router'; 

Vue.use(Router); 
Vue.use(VueNativeSock, process.env.WEBSOCKET_ADDR, { format: 'json', reconnection: true }); 
Vue.config.productionTip = false; 

const testsContext = require.context('./specs', true, /\.spec$/); 
testsContext.keys().forEach(testsContext); 

const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/); 
srcContext.keys().forEach(srcContext); 

내 main.js :

import Vue from 'vue'; 
import VueNativeSock from 'vue-native-websocket'; 
import VueHead from 'vue-head'; 
import App from './App'; 
import router from './router'; 

Vue.config.productionTip = process.env.NODE_ENV === 'production'; 
Vue.use(VueNativeSock, process.env.WEBSOCKET_ADDR, { format: 'json', reconnection: true }); 
Vue.use(VueHead); 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App }, 
    head: { 
    link: [ 
     { rel: 'icon', href: '/static/favicon-32x32.png', sizes: '32x32', type: 'image/png' }, 
    ], 
    }, 
}); 

난 도망 갈이 경고를 얻을 누락 어떤 생각? 다음과 같을 수

기본 테스트 : 당신의 루트는 테스트 환경에서 어디 설정되지 않을 수 있습니다처럼

import Vue from 'vue'; 
import ViewDTCs from '@/components/ViewDTCs'; 

describe('ViewDTCs.vue',() => { 
    const Constructor = Vue.extend(ViewDTCs); 
    const vm = new Constructor().$mount(); 
    ViewDTCs.$socket = new WebSocket(process.env.WEBSOCKET_ADDR); 
    it('has a created hook',() => { 
    expect(typeof ViewDTCs.created).to.equal('function'); 
    }); 
    it('should render page',() => { 
    expect(vm.$el.textContent).to.contain('Retrieving DTCs'); 
    }); 
}); 

Answer 1

것 같습니다. 당신이 카르마와 Avoriaz 또는 Vue Test Utils를 사용하는 경우,이 같은 경로를 포함하는 구성 요소를 테스트 할 수있었습니다 :

import { mount } from 'vue-test-utils' 
import router from 'src/router' // path to your router 
import MyComponent from 'src/components/MyComponent' 

describe('MyComponent.vue',() => { 
    let wrapper 

    beforeEach(() => { 
    wrapper = mount(MyComponent, { 
     router: router 
    }) 
    }) 

    it('has a created hook',() => { 
    expect(typeof wrapper.created).to.equal('function') 
    }) 
    ... 
})