Summary

I am using vue-i18n to i18n and Avoriaz to unit test my Vue.js components. I am getting a lot of warnings due to not translated strings which I cannot fix. How can I get rid of these warnings?

Example warning

'[vue-i18n] The keypath value' description.first 'cannot be translated. Use keypath as default. '

Test setup

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

      

        
        
        
      

    

Tested component

<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>