Update vue-i18n example

Author: MonicaBarinaga

package.json

@@ -70,7 +70,7 @@
     "vee-validate": "^2.2.15",
     "vue": "^3.0.0",
     "vue-apollo": "^3.0.4",
-    "vue-i18n": "^8.21.1",
+    "vue-i18n": "^9.0.0-beta.4",
     "vue-jest": "^5.0.0-alpha.4",
     "vue-router": "^3.4.5",
     "vuetify": "^2.3.10",

src/__tests__/components/Translations.vue

@@ -1,19 +1,13 @@
 <template>
-  <div>
-    <h2>{{ $t('Hello') }}</h2>
-    <button @click="switchLocale('en')">English</button>
-    <button @click="switchLocale('ja')">Japanese</button>
-  </div>
+    <h2>{{ $t('hello') }}</h2>
+    <select v-model="$i18n.locale">
+      <option value="en">English</option>
+      <option value="ja">Japanese</option>
+    </select>
 </template>
 
 <script>
 export default {
-  name: 'VueI18n',
-
-  methods: {
-    switchLocale(locale) {
-      this.$i18n.locale = locale
-    },
-  },
+  name: 'Translations',
 }
 </script>

src/__tests__/vue-i18n.js

@@ -1,42 +1,33 @@
-test.todo('Your test suite must contain at least one test.')
-
-// import '@testing-library/jest-dom'
-// import {render, fireEvent} from '@testing-library/vue'
-// import Vuei18n from 'vue-i18n'
-// import Translations from './components/Translations'
-
-// const messages = {
-//   en: {
-//     Hello: 'Hello',
-//   },
-//   ja: {
-//     Hello: 'こんにちは',
-//   },
-// }
-
-// test('renders translations', async () => {
-//   const {queryByText, getByText} = render(Translations, {}, vue => {
-//     // Let's register and configure Vuei18n normally
-//     vue.use(Vuei18n)
-
-//     const i18n = new Vuei18n({
-//       locale: 'en',
-//       fallbackLocale: 'en',
-//       messages,
-//     })
-
-//     // Notice how we return an object from the callback function. It will be
-//     // merged 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()
-// })
+ import '@testing-library/jest-dom'
+ import {render, fireEvent} from '@testing-library/vue'
+ import {createI18n} from 'vue-i18n'
+ import Translations from './components/Translations'
+
+ const i18n = createI18n({
+    legacy: true,
+   locale: 'en',
+   messages: {
+    en: {
+      hello: 'Hello',
+    },
+    ja: {
+      hello: 'こんにちは',
+    },
+  },
+ })
+
+ test('renders translations', async () => {
+   const {queryByText, getByText} = render(Translations, {
+       global: {
+           plugins: [i18n]
+       }
+   })
+
+   expect(getByText('Hello')).toBeInTheDocument()
+
+   await fireEvent.update(getByText('Japanese'))
+
+   expect(getByText('こんにちは')).toBeInTheDocument()
+
+   expect(queryByText('Hello')).toBeNull()
+ })