Vue3+TypeScript项目Vitest测试含vue-i18n组件报错：_ctx.$t不是函数

这个错误的核心原因是测试环境未将vue-i18n实例注入组件上下文，导致组件无法访问$t翻译方法，以下是三种针对性解决方案：

方案1：复用项目全局i18n配置 #

如果你的项目已在入口文件（如main.ts）全局注册了i18n，直接在测试文件中导入全局实例并注入组件：

假设你的i18n实例定义在src/i18n/index.ts：

// src/i18n/index.ts
import { createI18n } from 'vue-i18n'
import zhCN from './locales/zh-CN.json'
import enUS from './locales/en-US.json'

export default createI18n({
  locale: 'zh-CN',
  messages: { 'zh-CN': zhCN, 'en-US': enUS }
})

测试文件中使用：

import { mount } from '@vue/test-utils'
import AppLoader from '@/components/loader/AppLoader.vue'
import i18n from '@/i18n'

test('渲染空状态文本', () => {
  const wrapper = mount(AppLoader, {
    global: {
      plugins: [i18n] // 注入全局i18n插件
    },
    props: { isEmpty: true }
  })

  expect(wrapper.text()).toContain('暂无数据') // 对应你的message.empty翻译值
})

方案2：创建测试专用i18n实例 #

不想依赖全局配置时，可在测试文件中临时创建极简i18n实例，仅提供当前测试需要的翻译键：

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

// 测试用i18n实例，只包含当前组件需要的翻译
const testI18n = createI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': { message: { empty: '暂无数据' } }
  }
})

test('渲染空状态文本', () => {
  const wrapper = mount(AppLoader, {
    global: { plugins: [testI18n] },
    props: { isEmpty: true }
  })

  expect(wrapper.text()).toContain('暂无数据')
})

方案3：Mock $t方法跳过翻译逻辑 #

若仅测试组件逻辑、不关心翻译内容，直接mock$t方法即可：

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

test('渲染空状态文本', () => {
  const wrapper = mount(AppLoader, {
    global: {
      mocks: {
        $t: (key: string) => key // 直接返回键名，或自定义固定文本
      }
    },
    props: { isEmpty: true }
  })

  expect(wrapper.text()).toContain('message.empty')
})

TypeScript类型修复 #

如果测试时出现$t类型不存在的报错，在src/vite-env.d.ts中补充类型声明：

/// <reference types="vue-i18n" />

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $t: typeof import('vue-i18n').useI18n['t']
  }
}

export {}

内容的提问来源于stack exchange，提问作者Pooria Sadeghy