在 Vue Composition API 项目中，为组件添加国际化（vue-i18n）后，Jest 测试常因 $t 方法未定义而报错（如 TypeError: _ctx.$t is not a function）；根本解决方式是将 i18n 实例显式传入 mount() 的 global.plugins，而非仅 stub 或忽略。
在 vue composition api 项目中，为组件添加国际化（vue-i18n）后，jest 测试常因 `$t` 方法未定义而报错（如 `typeerror: _ctx.$t is not a function`）；根本解决方式是将 i18n 实例显式传入 `mount()` 的 `global.plugins`，而非仅 stub 或忽略。
在 Vue 应用中集成 vue-i18n 后，组件模板中使用 {{ $t('key') }} 或组合式 API 中调用 t('key') 能正常工作，但 Jest 测试环境默认不自动注入 i18n 插件——即使主应用已通过 app.use(i18n) 全局注册，测试中的 mount() 是独立的渲染上下文，必须手动提供依赖。
✅ 正确做法：将 i18n 实例作为插件传入 mount 配置：
// tests/unit/DudDialog.spec.js
import { mount } from '@vue/test-utils';
import { createPinia } from 'pinia';
import { createI18n } from 'vue-i18n'; // 注意：Vue 3 + vue-i18n v9+ 必须用 createI18n
import DudDialog from '@/components/DudsView/DudDialog.vue';
// 1. 创建测试专用的 i18n 实例（推荐最小化配置）
const i18n = createI18n({
locale: 'de',
messages: {
de: {
'Neuen Blindgänger erfassen': 'Neuen Blindgänger erfassen',
'TheDud bearbeiten': 'TheDud bearbeiten',
'Name': 'Name',
'Typ': 'Typ'
// ⚠️ 建议只提供测试用到的 key，避免冗余或缺失导致断言失败
}
}
});
// 2. 在 mount 时显式注入 i18n 和其他插件
describe('DudDialog.vue', () => {
let component;
const pinia = createPinia();
beforeEach(() => {
component = mount(DudDialog, {
global: {
plugins: [pinia, i18n], // ✅ 关键：i18n 必须在此处传入
stubs: [
'v-app', 'v-main', 'v-dialog', /* ...其他 Vuetify 组件 */
]
},
props: {
dud: new Dud('TheDud')
}
});
});
it('displays correct title', () => {
const titleElement = component.find('.dialogToolbar');
expect(titleElement.attributes().title).toContain('Neuen Blindgänger erfassen');
});
});? 为什么 plugins: [pinia, i18n] 是核心？
-
@vue/test-utils的mount()不会继承主应用的插件链； -
$t是vue-i18n通过app.config.globalProperties.$t注入的，而该属性仅在i18n插件被app.use(i18n)调用后才存在； -
global.plugins数组正是mount内部模拟app.use(...)的机制，确保$t、t、locale等能力在测试组件实例中可用。
?️ 进阶建议：提升测试健壮性
立即学习“前端免费学习笔记（深入）”；
-
避免硬编码翻译文本：改用
t('dialog.create.title')并在测试 i18n 配置中维护结构化 key，便于未来扩展语言； -
复用真实语言包（可选）：
import { de } from '@/locales/de.json'; // 若你的 src/locales/de.json 是标准格式 const i18n = createI18n({ locale: 'de', messages: { de } }); -
TypeScript 用户注意：若使用
$t报 TS 错误，需补充类型声明（见shims-vue-i18n.d.ts），但不影响 Jest 运行，仅为开发体验优化； -
慎用
stub: { $t: () => 'mock' }：虽可临时绕过错误，但会掩盖真实 i18n 行为（如 fallback、插值、复数规则），降低测试价值。
? 总结：Jest 中 vue-i18n 失效不是“bug”，而是测试隔离性的必然要求。显式注入 i18n 实例是最直接、最可靠、最符合官方推荐的方案。配合最小化语言配置与结构化 key 设计，即可让国际化功能在开发、运行与测试三端完全对齐。
