为何Jest测试自定义React Hook时无法正常提供useTranslation Hook？

你当前的模拟逻辑存在设计问题：你写的t函数实现逻辑就是直接返回入参的本地化key，自然不会返回翻译后的文本。

方案1：轻量Mock（适用于仅校验业务逻辑的场景） #

如果你的测试只需要验证自定义Hook的解析逻辑正确，不需要校验翻译内容的准确性，只需在Mock中添加你需要用到的翻译映射表即可：

jest.mock('react-i18next', () => ({
  useTranslation: () => {
    // 测试用到的所有翻译key和对应译文的映射
    const mockTransMap = {
      'user.name': '用户名',
      'user.age': '年龄',
      // 按需补充其他key
    }
    return {
      t: jest.fn((key) => mockTransMap[key] ?? key),
      // 如果你用到了i18n实例的其他属性，也可以在这里补充Mock
      i18n: {
        changeLanguage: jest.fn(),
        language: 'zh-CN'
      }
    }
  },
}))

该方案测试运行速度快，还可以通过t的Mock调用记录，验证你是否正确传入了本地化key。

方案2：使用真实i18n实例（适用于需要校验翻译内容的场景） #

如果你需要验证翻译内容是否正确匹配了翻译文件，不要Mock整个react-i18next包，在测试初始化文件中配置真实的i18n实例即可：

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
// 引入你的翻译资源文件
import zhTranslation from './locales/zh-CN.json'

i18n.use(initReactI18next).init({
  lng: 'zh-CN',
  fallbackLng: 'zh-CN',
  resources: {
    'zh-CN': {
      translation: zhTranslation
    }
  },
  interpolation: {
    escapeValue: false
  }
})

注意使用该方案时需要删除之前写的jest.mock('react-i18next')代码，避免Mock覆盖真实的模块导出。

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