VueRouter ist in Karma-Unit-Tests nicht definiert

Question

Ich erhalte Warnungen während Tests, die auf meinem neuen Vue.js-Projekt laufen. Überall dort, wo eine Komponente verwendet, um den Router entweder in der Vorlage als <router-link> oder programmatisch als this.$router.push('/');

Die Tests werden durchzulassen, aber Protokollierung diese Warnungen:

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

found in 

---> <RouterLink> 
    <Root>' 

ich Vue2 und das Projekt bin mit basiert auf dem webpack Projekt erstellt vom CLI-Tool.

My Unit-Test 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); 

Mein 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' }, 
    ], 
    }, 
}); 

Jede Idee, was ich vermisse diese Warnungen wegzukommen gehen?

Ein grundlegender Test könnte wie folgt aussehen:

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

Es sieht aus wie könnte Ihre Routen nicht überall in Ihrer Testumgebung eingerichtet werden. Wenn Sie Karma und Avoriaz oder Vue Test Utils verwenden, ich habe in der Lage gewesen Komponenten zu testen, die Routen wie diese enthalten:

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') 
    }) 
    ... 
})