Тесты проекта Vue терпят неудачу, когда я добавляю vue-i18n (karma + mocha + phantomJs)

Я включил интернационализацию в свой проект (решил использовать vue-i18n lib)
Перевод работает как положено, но когда я запускаю свои юнит-тесты, у меня возникают ошибки, обратите внимание: тесты прошли до добавления vue-i18n.

Моя конфигурация vue-i18n (src/i18n/index.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 }
})

Это мой компонент, который я тестирую (Home.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>

Это тест (Home.spec.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)

Я искал другие подобные проблемы, но я не мог найти четкого решения.

Благодарю вас!


person V. Sambor    schedule 13.01.2018    source источник


Ответы (1)


Мне удается решить это в конце...

Я создал файл в тестах с именем 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 не вводился в тестовый компонент.

person V. Sambor    schedule 13.01.2018