Vue 项目中 Jest 单元测试集成 vue-i18n 的完整实践指南-js教程-PHP中文网

Vue 项目中 Jest 单元测试集成 vue-i18n 的完整实践指南

在 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

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

@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、插值、复数规则），降低测试价值。