如何Mock i18next的useTranslation钩子使t函数按键返回值？

1. 检查翻译文件的导入与结构 #

• 先确认mockTranslations是否正确加载：在mock代码前添加console.log(mockTranslations)，如果输出为空对象，大概率是文件路径错误或JSON文件格式不合法（比如语法错误）。
• 如果翻译键是层级结构（如{ "home": { "title": "Welcome" } }），直接用mockTranslations[key]无法解析'home.title'这类键，需要实现一个嵌套键解析函数：

const getNestedTranslation = (translations, key) => {
  return key.split('.').reduce((current, keyPart) => current?.[keyPart], translations);
};

然后将t函数修改为：

t: (key) => getNestedTranslation(mockTranslations, key) || key,

添加|| key是为了在找不到对应翻译时返回原键，方便调试。

2. 优化Jest Mock的实现逻辑 #

避免引入不必要的实际模块逻辑，直接mock核心部分即可，同时修复异步方法的mock：

import mockTranslations from './src/locales/en/translation.json';

jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key) => {
      const getNestedTranslation = (translations, keyPath) => {
        return keyPath.split('.').reduce((current, part) => current?.[part], translations);
      };
      return getNestedTranslation(mockTranslations, key) || key;
    },
    i18n: {
      language: 'en',
      addResourceBundle: jest.fn(),
      changeLanguage: jest.fn().mockResolvedValue(true), // 用mockResolvedValue处理异步
    },
  }),
  // 如果组件使用了Trans组件，需要额外mock
  Trans: ({ children }) => children,
}));

3. 处理TypeScript类型兼容（若使用TS） #

确保翻译文件的类型正确匹配，可通过类型别名约束：

import type TranslationType from './src/locales/en/translation.json';
const mockTranslations: TranslationType = require('./src/locales/en/translation.json');

或者在t函数中添加类型断言，避免类型报错。

4. 调试验证 #

在测试用例中直接调用t函数并打印结果，确认键名是否正确、翻译值是否被正确读取：

import { useTranslation } from 'react-i18next';

test('t函数返回正确翻译值', () => {
  const { t } = useTranslation();
  console.log(t('home.title')); // 打印结果验证
  expect(t('home.title')).toBe('Welcome');
});

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