如何使用React Testing Library获取i18next key对应的实际翻译值

问题原因 #

你当前代码中针对react-i18next的mock配置，直接将t函数设定为返回传入的翻译key，因此测试时只能匹配key值，无法获取到翻译加载完成后用户实际看到的文本内容。

方案1：使用真实i18n配置加载翻译（适合多语言测试场景） #

如果需要完整测试翻译加载逻辑、甚至多语言切换效果，可直接在测试中初始化真实的i18n实例，加载对应语言的翻译文件：

1. 移除原有jest.mock("react-i18next")的mock代码
2. 在测试文件头部新增i18n初始化逻辑：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
// 请根据你的项目实际路径，导入对应语言的翻译JSON文件
import zhCN from "../../locales/zh-CN.json";

// 初始化测试专用i18n实例
i18n.use(initReactI18next).init({
  lng: "zh-CN",
  fallbackLng: "zh-CN",
  resources: {
    "zh-CN": {
      translation: zhCN,
    },
  },
  interpolation: {
    escapeValue: false,
  },
});

后续测试用例可直接用翻译后的实际文本查询元素，比如form.label.password对应的翻译为「密码」，则测试可以写为：

it("test labels", () => {
  renderWithContext();
  screen.getByLabelText("邮箱");
  screen.getByLabelText("密码");
});

方案2：自定义mock返回翻译值（适合轻量测试场景） #

如果不需要引入完整的i18n依赖，可直接修改mock逻辑，预设测试需要用到的key对应的翻译值：

// 预设需要用到的翻译key与对应值
const mockTranslations = {
  "Email": "邮箱",
  "form.label.password": "密码"
};

jest.mock("react-i18next", () => ({
  useTranslation: () => ({ 
    t: (key) => mockTranslations[key] ?? key 
  }),
}));

后续测试用例同样可以直接使用翻译后的文本查询元素。

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