vue-i18nを含むコンポーネントをJestでテストする

Jest、vue-test-utilsを使用して、vue-i18nを使っているコンポーネントをテストする方法を紹介します。

vue-i18nを適切にセットアップせずにコンポーネントをテストすると以下のようなエラーが出てしまいます。

TypeError: Cannot read property '_t' of undefined
TypeError: Cannot read property 'locale' of undefined

コード例

上記のエラーが出てしまうのは、コンポーネントが依存するvue-i18nを設定できていないためです。 ここでは、i18nを使っている、ExampleComponent.vueを元にテスト方法をコードで解説します。

  • ~/components/ExampleComponent.vue
<template>
  <div>
      {{$t('hoge')}}
  </div>
</template>
  • ~/locales/en.json
{
  "hoge": "Some English Text"
}
  • ~/locales/ja.json
{
  "hoge": "ある日本語のテキスト"
}
  • ~/tests/unit/specs/ExampleComponent.spec.ts



















 













import ExampleComponent from '~/components/ExampleComponent.vue'
import { shallowMount } from "@vue/test-utils"
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// VueI18nオブジェクトを作成する
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    'en': require('~/locales/en.json'),
    'ja': require('~/locales/ja.json')
  }
})

describe('vue-i18nを含むExampleComponentのテスト', () => {
  let wrapper
  beforeAll(() => {
    // i18nへの依存を、マウント時に先ほどのオブジェクトを渡すことで解決
    wrapper = shallowMount(ExampleComponent, {i18n})
  })
  test('the componenet is mounted properly & is vue instance', () => {
    expect(wrapper.isVueInstance()).toBe(true)
  })
  test('HTML include the text "Some English Text"', () => {
    expect(wrapper.html()).toContain("Some English Text")
  })
  test('include the text "ある日本語のテキスト" when change locale to Japanese', () => {
    i18n.locale = 'ja'
    expect(wrapper.html()).toContain("ある日本語のテキスト")
  })
})

beforeAllで定義した関数は、一度だけ呼ばれます。 ここでExampleComponentを、i18nオブジェクトを渡してマウントしています。 これにより、vue-i18n$tを含むコンポーネントをテストできます。

i18n.localeを後から変更することで、言語設定が変わることもテストできます。

Last Updated: 11/18/2018, 6:14:38 AM