总结
我正在使用 vue-i18n对于 i18n 和 Avoriaz用于单元测试我的 Vue.js 组件。由于未翻译的字符串,我收到很多警告,我无法修复。我怎样才能摆脱这些警告?
警告示例
'[vue-i18n] Cannot translate the value of keypath 'description.first'. Use the value of keypath as default.'
测试设置
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>
最佳答案
您需要创建对象 i18n
然后注入(inject)它:
// This object containing your translated strings
const messages = {/*...*/};
const i18n = new VueI18n({locale: 'en', messages});
const wrapper = mount(Register, {
store,
i18n
})
关于javascript - Vue.js Avoriaz 单元测试在使用 vue-i18n 时产生翻译警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45184859/