Merge pull request #58 from makeupsomething/master

Add additionalOptions test example

Author: afontcu

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>{{ $t('Hello') }}</h2>
+    <button @click="switchLocale('en')">English</button>
+    <button @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,36 @@
+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 messages = {
+  en: {
+    Hello: 'Hello'
+  },
+  ja: {
+    Hello: 'こんにちは'
+  }
+}
+
+test('can render en and ja text in header', async () => {
+  const { queryByText, getByText } = render(VueI18n, {}, vue => {
+    vue.use(Vuei18n)
+    const i18n = new Vuei18n({
+      locale: 'en',
+      fallbackLocale: 'en',
+      messages
+    })
+    //return i18n object so that it will be available as an additional option on the created vue instance
+    return { i18n }
+  })
+
+  expect(getByText('Hello')).toBeInTheDocument()
+
+  await fireEvent.click(getByText('Japanese'))
+
+  expect(getByText('こんにちは')).toBeInTheDocument()
+
+  expect(queryByText('Hello')).toBeNull()
+})