当使用vue-i18n时，Vue.js Avoriaz单元测试会产生翻译警告

Question

摘要

我正在使用vue-i18n for i18n和Avoriaz对我的Vue.js组件进行单元测试。 我收到很多警告，因为没有翻译的字符串，我无法解决。 我怎样才能摆脱这些警告？

警告示例

'[vue-i18n]无法转换keypath'description.first'的值。 使用keypath的值作为默认值。

测试设置

import Vue from 'vue'
import Vuex from 'vuex'
import {
  mount
} from 'avoriaz'
import sinon from 'sinon'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'
import VueI18n from 'vue-i18n'
import store from './../../../state/index'
import Register from '@/components/Register'

Vue.use(BootstrapVue)
Vue.use(VueResource)
Vue.use(VueI18n)

describe('Register', () => {
  it('should accept inputs', () => {
    store.locale = 'en'
    const wrapper = mount(Register, {
      store
    })

    let name = 'Hans'
    let password = '123'

    let nameInput = wrapper.find('input')[0]
    let passwordInput = wrapper.find('input')[1]

    nameInput.element.value = name
    passwordInput.element.value = password

    nameInput.trigger('input')
    passwordInput.trigger('input')

    expect(wrapper.vm.$store.state.user.name).to.equal(name)
    expect(wrapper.vm.$store.state.user.password).to.equal(password)
  })
})

经过测试的组件

<template>
  <div class="row justify-content-md-center">
    <div class="col-6">
      <b-form-fieldset
        :description="$t('description.first')"
        :label="$t('label.first')"
        :label-size="1">
        <b-form-input v-model="name"></b-form-input>
      </b-form-fieldset>
      <b-form-fieldset
        :description="$t('description.second')"
        :label="$t('label.second')"
        :label-size="1">
        <b-form-input v-model="password" type="password"></b-form-input>
      </b-form-fieldset>
      <b-button variant="outline-success" size="sm" @click="create">{{ $t('button.first') }}</b-button>
    </div>
  </div>
</template>

<script>
  export default {
    i18n: {
      messages: {
        en: {
          'description.first': 'Enter a name',
          'label.first': 'Name *',
          'description.second': 'Enter a password',
          'label.second': 'Password *',
          'button.first': 'Create'
        },
        de: {
          'description.first': 'Gebe einen Namen ein',
          'label.first': 'Name *',
          'description.second': 'Gebe ein Passwort ein',
          'label.second': 'Passwort *',
          'figcaption.first': 'Du kannst einen dieser Nutzer wählen, um dich einzuloggen.',
          'button.first': 'Erstellen'
        }
      }
    },

    computed: {
      user: {
        get () {
          return this.$store.state.user
        }
      },

      name: {
        get () {
          return this.$store.state.user.name
        },

        /**
         * @param name
         */
        set (name) {
          this.$store.commit('SET_USER_NAME', name)
        }
      },

      password: {
        get () {
          return this.$store.state.user.password
        },

        /**
         * @param password
         */
        set (password) {
          this.$store.commit('SET_USER_PASSWORD', password)
        }
      }
    },

    methods: {
      create () {
        this.$store.dispatch('saveUser', this.user)
      }
    }
  }
</script>

Answer 1

你需要创建对象i18n然后注入它：

// This object containing your translated strings
const messages = {/*...*/};
const i18n = new VueI18n({locale: 'en', messages});

const wrapper = mount(Register, {
    store,
    i18n
})