使用@nuxtjs/i18n测试Vue组件：解决"需通过app.use安装"错误

在Nuxt项目中使用@nuxtjs/i18n库时，编写Vue组件测试持续遇到错误：Need to install with app.use function。

基础测试代码如下：

test('renders all child components', () => {
    const wrapper = mount(AppSettings, {
        global: {
            components: mockComponents,
            mocks: {
                $t: (key: string) => key // Mocking the i18n `$t` function
            },
        }
    })

    Object.keys(mockComponents).forEach((componentName) => {
        expect(wrapper.findComponent({ name: componentName }).exists()).toBe(true)
    })
})

尝试过的无效Mock方案：

import { config } from '@vue/test-utils'

vi.mock('@nuxtjs/i18n', () => ({
    useI18n: vi.fn(() => ({
      t: (tKey: string) => tKey
    }))
}))

config.global.mocks = {
    $t: (tKey: string) => tKey
}

以下是几种可行的解决方法：

方案1：注册Mock的i18n插件 #

组件内部可能依赖了i18n插件的全局注入，单纯mock$t无法满足需求，需要模拟完整的插件安装流程：

import { mount } from '@vue/test-utils'
import AppSettings from '@/components/AppSettings.vue'

// 模拟i18n插件逻辑
const mockI18nPlugin = {
  install: (app) => {
    // 注入全局$t方法
    app.config.globalProperties.$t = (key: string) => key
    // 为useI18n composable提供依赖注入
    app.provide('i18n', { t: (key: string) => key })
  }
}

test('renders all child components', () => {
    const wrapper = mount(AppSettings, {
        global: {
            components: mockComponents,
            plugins: [mockI18nPlugin] // 注册mock插件
        }
    })

    Object.keys(mockComponents).forEach((componentName) => {
        expect(wrapper.findComponent({ name: componentName }).exists()).toBe(true)
    })
})

方案2：完整Mock@nuxtjs/i18n导出 #

如果组件中使用了useI18n组合式函数，需要确保mock包含该方法，同时覆盖Nuxt内部可能调用的createI18n：

import { mount } from '@vue/test-utils'
import AppSettings from '@/components/AppSettings.vue'

vi.mock('@nuxtjs/i18n', () => {
  const mockUseI18n = vi.fn(() => ({
    t: (key: string) => key,
    locale: 'en' // 按需添加组件用到的其他i18n属性
  }))
  return {
    useI18n: mockUseI18n,
    createI18n: vi.fn(() => ({
      install: () => {}
    }))
  }
})

test('renders all child components', () => {
    const wrapper = mount(AppSettings, {
        global: {
            components: mockComponents
        }
    })

    Object.keys(mockComponents).forEach((componentName) => {
        expect(wrapper.findComponent({ name: componentName }).exists()).toBe(true)
    })
})

方案3：使用Nuxt官方测试工具 #

如果上述方案无效，建议使用@nuxt/test-utils，它会自动处理Nuxt生态的插件与模块集成，包括@nuxtjs/i18n：

import { mount } from '@nuxt/test-utils/runtime'
import AppSettings from '@/components/AppSettings.vue'

test('renders all child components', async () => {
    const wrapper = await mount(AppSettings, {
        components: mockComponents
    })

    Object.keys(mockComponents).forEach((componentName) => {
        expect(wrapper.findComponent({ name: componentName }).exists()).toBe(true)
    })
})

注：使用该方案需要先安装@nuxt/test-utils依赖，并在测试配置文件中添加Nuxt相关配置。

内容的提问来源于stack exchange，提问作者Jovan Bankovic