Vue3组合式API项目Jest集成i18n测试报错求助

方案一：在测试中完整注册i18n插件 #

直接把项目的i18n实例加入测试的全局插件配置，让测试环境和生产环境的i18n行为保持一致。

修改测试代码： #

1. 导入项目的i18n配置文件（假设你的i18n入口文件是@/i18n.js）
2. 在组件挂载时，将i18n加入global.plugins数组

// DudDialog.spec.js
// 新增导入i18n实例
import i18n from "@/i18n";
// ... 其他导入代码

function mountDudDialog() {
  component = mount(DudDialog, {
    global: {
      stubs: [
        "v-app",
        "v-main",
        "v-dialog",
        // ... 你的其他stubs
      ],
      plugins: [pinia, i18n], // 加入i18n插件
    },
    props: {
      dud: dudProp,
    },
  });
}

这种方式适合需要验证翻译内容正确性的测试场景，比如你测试标题是否显示正确翻译文本时，能直接复用真实的i18n逻辑。

方案二：存根$t方法 #

如果只关注组件逻辑，不需要验证翻译内容，可以给Vue实例注入一个伪的$t方法，避免加载完整i18n。

方式1：单文件测试中局部配置 #

在挂载组件时，通过global.mocks注入$t：

function mountDudDialog() {
  component = mount(DudDialog, {
    global: {
      stubs: [
        // ... 你的stubs列表
      ],
      plugins: [pinia],
      mocks: {
        // 简单返回翻译键，或者自定义返回内容
        $t: (key) => key,
        // 如果需要匹配你的德语翻译，也可以用已导入的translations：
        // $t: (key) => translations.de[key] || key
      }
    },
    props: {
      dud: dudProp,
    },
  });
}

方式2：全局配置所有测试 #

如果多个测试文件都需要处理i18n，可以在Jest的全局配置文件（比如jest.setup.js）中统一设置：

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

// 全局mock $t方法
config.global.mocks.$t = (key) => key;

注意：如果用全局配置，要确保jest.setup.js已在package.json的Jest配置中引用：

{
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"]
  }
}

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