代码之家 › 专栏 › 技术社区 › V. Sambor

当我添加Vue-i18n时,Vue项目测试失败(karma+mocha+phantomJs)

vue-i18n vuejs2 phantomjs vue.js

1

V. Sambor · 技术社区 · 8 年前

我在项目中加入了国际化(我决定使用vue-i18n库)
翻译工作如预期的那样,但当我运行单元测试时,出现了错误,请注意:在添加vue-i18n之前,测试通过了。

我的vue-i18n配置( src/i18n/索引。js公司 ):

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import fr from './fr'
import en from './en'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en,
    fr
  }
})

主要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 }
})

这是我测试的组件( 家vue ):

<template>
  <section class="hero">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">Welcome to Server Client Project (STP)!</h1>
      </div>
      <div style="text-color: black;">{{ $t("general.hello") }}</div>
      or
      <div style="text-color: black;">{{ $i18n.t("general.hello") }}</div>
      or
      <div style="text-color: black;">{{ $i18n.messages.fr.general.hello }}</div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

这就是测试( 家规范js ):

import Vue from 'vue'
import Home from '@/components/Home'

// I've tried with this 2 lines, but same results.  #####
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

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

我得到的错误:

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)

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

非常感谢。

1 回复 | 直到 8 年前

1

4

V. Sambor 8 年前

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

我在测试中创建了一个名为 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没有注入测试组件。