Vuerouter在业力单位测试中不确定

Question

我在新的vue.js项目上运行测试时会收到警告。无论何时将组件在模板中以<router-link>或编程为this.$router.push('/');

以编程方式使用路由器

测试正在通过，但记录了这些警告：

ERROR LOG: '[Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"
found in
---> <RouterLink>
   <Root>'

我正在使用VUE2，该项目基于CLI工具生成的WebPack项目。

我的单位测试索引：

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);

我的主人公：

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