Merge pull request #3 from makeupsomething/develop

Develop

Author: makeupsomething

package.json

@@ -64,6 +64,7 @@
     "lint-staged": "^8.1.7",
     "prettier": "^1.17.1",
     "vee-validate": "^2.2.9",
+    "vue-i18n": "^8.12.0",
     "vue-jest": "^3.0.4",
     "vue-router": "^3.0.6",
     "vuex": "^3.1.1"

tests/__tests__/components/VueI18n.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h2 data-testid="section-header">{{ $t('Hello') }}</h2>
+    <button data-testid="button-en" @click="switchLocale('en')">English</button>
+    <button data-testid="button-ja" @click="switchLocale('ja')">
+      Japanese
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VueI18n',
+
+  methods: {
+    switchLocale(locale) {
+      this.$i18n.locale = locale
+    }
+  }
+}
+</script>

tests/__tests__/vueI18n.js

@@ -0,0 +1,29 @@
+import 'jest-dom/extend-expect'
+import { cleanup, render, fireEvent } from '@testing-library/vue'
+import Vuei18n from 'vue-i18n'
+import VueI18n from './components/VueI18n'
+
+afterEach(cleanup)
+
+const ja = {
+  Hello: 'こんにちは'
+}
+
+test('can render en and ja text in header', async () => {
+  const { queryByTestId, getByTestId } = render(VueI18n, {}, vue => {
+    vue.use(Vuei18n)
+    const i18n = new Vuei18n({
+      locale: 'en',
+      messages: {
+        ja
+      }
+    })
+    return { i18n }
+  })
+
+  expect(queryByTestId('section-header')).toHaveTextContent('Hello')
+
+  await fireEvent.click(getByTestId('button-ja'))
+
+  expect(queryByTestId('section-header')).toHaveTextContent('こんにちは')
+})