使用 Vue3 的 vue-i18n 插件时，Jest 错误“SyntaxError: Need to install with `app.use` function”答案

【问题标题】：Jest error "SyntaxError: Need to install with `app.use` function" when using vue-i18n plugin for Vue3使用 Vue3 的 vue-i18n 插件时，Jest 错误“SyntaxError: Need to install with `app.use` function”
【发布时间】：2021-05-26 14:58:10
【问题描述】：

我正在为我的 Vue3(typescript) 应用程序使用 vue-i18n 插件。下面是我在组件代码中的设置函数

Home.vue

import {useI18n} from 'vue-i18n'

setup() {
        const {t} = useI18n()
return {
        t
     }

}

Main.ts

import { createI18n } from 'vue-i18n'
import en from './assets/translations/english.json'
import dutch from './assets/translations/dutch.json'

// internationalization configurations
const i18n = createI18n({
    messages: {
        en: en,
        dutch: dutch
    },
    fallbackLocale: 'en',
    locale: 'en'
    
})
// Create app
const app = createApp(App)
app.use(store)
app.use(router)
app.use(i18n)

app.mount('#app')

代码可以正常工作和编译。但是在安装时组件的开玩笑测试用例失败了

规格文件

import { mount, VueWrapper } from '@vue/test-utils'
import Home from '@/views/Home.vue'
import Threat from '@/components/Threat.vue'

// Test case for Threats Component

let wrapper: VueWrapper<any>

beforeEach(() => {
  wrapper = mount(Home)
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  jest.spyOn(console, 'warn').mockImplementation(() => { });
});

describe('Home.vue', () => {

  //child component 'Home' existance check
  it("Check Home component exists in Threats", () => {

    expect(wrapper.findComponent(Home).exists()).toBe(true)
  })

  // Threat level list existance check
  it("Check all 5 threat levels are listed", () => {
    expect(wrapper.findAll('.threat-level .level-wrapper label')).toHaveLength(5)
  })


})

以下是错误

请帮我解决这个问题。

【问题讨论】：

标签： jestjs vuejs3 vue-i18n

【解决方案1】：

vue-18n 插件应该在挂载过程中使用global.plugins option 安装在包装器上：

import { mount } from '@vue/test-utils'
import { createI18n } from 'vue-i18n'
import Home from '@/components/Home.vue'

describe('Home.vue', () => {
  it('i18n', () => {
    const i18n = createI18n({
      // vue-i18n options here ...
    })

    const wrapper = mount(Home, {
      global: {
        plugins: [i18n]
      }
    })

    expect(wrapper.vm.t).toBeTruthy()
  })
})

GitHub demo

【讨论】：