Vue.js 当我添加Vue-i18n（karma+mocha+phantomJs）时，Vue项目测试失败

我将国际化包括在我的项目中，我决定使用vue-i18n lib 翻译工作如预期，但当我运行单元测试时，我有错误，请注意：在添加vue-i18n之前，测试已通过

我的vue-i18n配置src/i18n/index.js：

主要内容包括：

import Vue from 'vue'
import Vuex from 'vuex'
import i18n from './i18n'
import App from './App'
import store from './store'
import router from './router'

Vue.use(Element)
Vue.use(Vuex)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  store,
  router,
  template: '<App/>',
  components: { App }
})

我得到的错误是：

13 01 2018 11:25:21.560:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket ch-UPyobpSLXRsYVAAAA with id 80198143
ERROR LOG: '[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'i18n._t')"

(found in <Root>)'
ERROR LOG: TypeError{stack: 'http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:13162:20
render@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:16593:29
_render@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:5265:26
updateComponent@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:3556:28
get@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:3906:29
Watcher@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:3895:15
mountComponent@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:3563:14
$mount@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:9220:24
$mount@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:11581:20
http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:16573:62
callFn@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4481:25
run@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4473:13
runTest@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4969:13
http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:5075:19
next@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4887:16
http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4897:11
next@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4821:16
http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4865:9
timeslice@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:82:27', line: 13162, sourceURL: 'http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7'}

  Home.vue
    ✗ should render correct contents
    undefined is not a constructor (evaluating 'vm.$el.querySelector('h1')')
    webpack:///test/unit/specs/Home.spec.js:10:32 <- index.js:16575:32


PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.072 secs / 0.007 secs)

我四处寻找其他类似的问题，但找不到明确的解决方案

---

谢谢大家!

我终于解决了这个问题

我在测试中创建了一个名为TestUtil.js的文件，我在其中执行以下操作：

import Vue from 'vue'
import i18n from '../../../src/i18n'

module.exports = {
  getRenderedComponent(Component, propsData) {
    const Constructor = Vue.extend(Component)
    return new Constructor({
      i18n,
      propsData
    })
  }
}

然后我更改了规格：

import Home from '@/components/Home'
import Util from './TestUtil'

describe('Home.vue', () => {
  it('should render correct contents', () => {
    const vm = Util.getRenderedComponent(Home)
    vm.$mount()
    expect(vm.$el.querySelector('h1').textContent)
      .to.equal('Welcome to Server Client Project (STP)!')
  })
})

---

问题在于测试组件中没有注入i18n。

我最终设法解决了这个问题

我在测试中创建了一个名为TestUtil.js的文件，我在其中执行以下操作：

import Vue from 'vue'
import i18n from '../../../src/i18n'

module.exports = {
  getRenderedComponent(Component, propsData) {
    const Constructor = Vue.extend(Component)
    return new Constructor({
      i18n,
      propsData
    })
  }
}

然后我更改了规格：

import Home from '@/components/Home'
import Util from './TestUtil'

describe('Home.vue', () => {
  it('should render correct contents', () => {
    const vm = Util.getRenderedComponent(Home)
    vm.$mount()
    expect(vm.$el.querySelector('h1').textContent)
      .to.equal('Welcome to Server Client Project (STP)!')
  })
})

问题在于测试组件中没有注入i18n

import Home from '@/components/Home'
import Util from './TestUtil'

describe('Home.vue', () => {
  it('should render correct contents', () => {
    const vm = Util.getRenderedComponent(Home)
    vm.$mount()
    expect(vm.$el.querySelector('h1').textContent)
      .to.equal('Welcome to Server Client Project (STP)!')
  })
})