Enzyme mount含i18n组件报错t未定义，如何测试onChange？

看起来你遇到了shallow和mount渲染在i18n场景下的两难问题——shallow找不到深层元素，mount又因为t未定义报错。我来帮你拆解下解决方案：

一、先解决mount时t未定义的问题 #

报错的核心原因是你的mockI18n不够完整，无法满足子组件中useTranslation钩子（或者withTranslation HOC）的需求。这里提供两种可行的修复思路：

方案1：完善mockI18n并确保上下文传递 #

如果坚持用mount，可以把mockI18n补全，让它符合react-i18next的i18n实例规范，确保子组件能通过上下文拿到可用的t函数：

const mockI18n = {
  t: (key) => key,
  on: jest.fn(),
  getFixedT: () => (key) => key,
  loadNamespaces: jest.fn().mockResolvedValue({}),
  // 补充useTranslation需要的核心属性
  language: 'en',
  exists: () => true,
  changeLanguage: jest.fn().mockResolvedValue({}),
};

之后再用I18nextProvider包裹组件进行mount，子组件里的t('User ID')就能正常返回key值，不会再报错。

方案2：直接mockuseTranslation钩子 #

更简单的方式是在测试文件顶部mockreact-i18next的useTranslation，这样不管是shallow还是mount，子组件都能直接拿到可用的t函数：

jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key) => key,
    i18n: {
      changeLanguage: jest.fn(),
    },
  }),
  I18nextProvider: ({ children }) => children, // 直接传递子组件，无需额外处理上下文
}));

这时你可以直接mount组件，不需要手动包裹I18nextProvider：

const wrapper = mount(<Component initState={initData} />);
// 现在可以正常找到嵌套元素并模拟交互
wrapper.find('input[data-testid="user-id"]').simulate('change', { target: { value: '12345' } });

二、用shallow渲染测试onChange的方法 #

如果你不想用mount，只想用shallow，那可以通过dive()方法深入渲染子组件（适用于类组件或被HOC包裹的组件）：

const wrapper = shallow(
  <I18nextProvider i18n={mockI18n}>
    <Component initState={initData} />
  </I18nextProvider>
);
// 找到目标组件后，dive进入其内部渲染
const componentInner = wrapper.find(Component).dive();
// 现在可以找到嵌套的子元素并模拟交互
componentInner.find('.user-id-input').simulate('change', { target: { value: 'test-user' } });
// 断言onChange是否被正确调用
expect(yourOnChangeMock).toHaveBeenCalledWith('test-user');

另外，如果你只是想验证onChange的逻辑正确性，也可以直接调用组件实例的onChange方法，跳过DOM模拟步骤：

const onChangeMock = jest.fn();
const wrapper = shallow(<Component initState={initData} onChange={onChangeMock} />);
wrapper.instance().onChange({ target: { value: 'test-value' } });
expect(onChangeMock).toHaveBeenCalledWith('test-value');

总结 #

• 若需测试DOM交互（如输入、点击），推荐用mount+mockuseTranslation的组合，省心且覆盖完整；
• 若仅需验证组件逻辑，用shallow+dive()或直接调用方法即可，避免渲染整个DOM树提升测试效率。

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