如何用Testing Library校验React组件内函数返回的国际化动态文本

安全阿岳

2026-10-2

问题原因

测试环境未加载react-i18next的配置和翻译资源，t函数无法执行翻译逻辑，直接返回了传入的键名press.text，因此找不到对应的翻译内容。

解决方案

方案1：Mock `useTranslation` 钩子（单元测试推荐）

单元测试无需依赖真实翻译资源，直接mock翻译钩子控制返回结果即可，执行速度更快。在测试文件顶部添加如下mock代码：

jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string, params?: Record<string, any>) => {
      // 按需配置测试需要的翻译映射
      const translateMap: Record<string, string> = {
        'press.media.phone': 'Phone',
        'press.media.letter': 'Letter',
        'press.media.email': 'Email',
        'press.media.sms': 'SMS',
      };
      if (key === 'press.text') {
        return `Planned contact method: ${params?.media || ''}`;
      }
      return translateMap[key] || key;
    }
  })
}));

原有测试用例无需修改，直接运行即可通过校验。

方案2：测试环境初始化i18n（集成测试推荐）

如果需要验证真实翻译逻辑，可在测试全局配置文件（通常为jest.setup.ts）中初始化i18n，加载测试用翻译资源：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  resources: {
    en: {
      translation: {
        press: {
          media: {
            phone: 'Phone',
            letter: 'Letter',
            email: 'Email',
            sms: 'SMS'
          },
          text: 'Planned contact method: {{media}}'
        }
      }
    }
  }
});

配置完成后所有测试用例都会调用真实的翻译逻辑，可正常匹配翻译后的文本内容。