javascript - 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项目。

我的单元测试 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

看起来您的路由可能未在您的测试环境中的任何位置设置。如果您使用 Karma 和 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')
  })
  ...
})