如何测试被react-native-i18next高阶组件包裹的React Native组件？

刚好用react-native-i18next做过国际化组件的测试，给你分享几个实用的方案，都亲测有效：

方案1：直接渲染包裹后的组件，Mock i18next的t函数 #

因为translate这个高阶组件会给你的组件注入t翻译方法，所以我们可以在测试里直接Mock这个函数，让它返回我们预期的文本，不用真的加载翻译文件。

举个用Jest + React Testing Library的例子：

import React from 'react';
import { render, screen } from '@testing-library/react-native';
import { Header } from './Header';

// Mock react-native-i18next的translate方法，让它直接返回原组件
jest.mock('react-native-i18next', () => ({
  translate: () => Component => Component,
  // 如果你的组件里用了useTranslation钩子，也可以一起Mock
  useTranslation: () => ({ t: key => key }),
}));

test('Header组件显示正确的翻译文本', () => {
  render(<Header onCancel={() => {}} />);
  
  // 这里我们让Mock的t函数直接返回key，所以验证文本是否为对应的key
  expect(screen.getByText('app:cancel')).toBeTruthy();
  expect(screen.getByText('screenTitle')).toBeTruthy();
});

如果想让t返回真实的翻译内容，也可以修改Mock逻辑：

useTranslation: () => ({ 
  t: key => {
    const testTranslations = {
      'app:cancel': '取消',
      'screenTitle': '分享给好友'
    };
    return testTranslations[key] || key;
  }
}),

方案2：导出原始组件，手动传递t函数 #

这个方案更灵活，我们可以把未被translate包裹的原始组件单独导出，测试的时候直接用原始组件，自己传递一个Mock的t函数进去，完全控制翻译逻辑。

先修改你的组件代码，把原始组件单独导出：

// 导出原始未包裹的组件，供测试使用
export const HeaderRaw = props => (
  <View style={styles.header}>
    <TouchableHighlight onPress={props.onCancel}>
      <Text style={styles.headerAction}>
        {props.t('app:cancel')}
      </Text>
    </TouchableHighlight>
    <Text style={styles.screenTitle}>
      {props.t('screenTitle')}
    </Text>
    <TouchableHighlight onPress={props.onConfirm}>
      <Text style={styles.headerAction}>
        {props.t('app:confirm')}
      </Text>
    </TouchableHighlight>
  </View>
);

// 导出被包裹后的组件，供业务代码使用
export const Header = translate('shareWith')(HeaderRaw);

然后测试的时候直接渲染HeaderRaw：

import React from 'react';
import { render, screen } from '@testing-library/react-native';
import { HeaderRaw } from './Header';

test('Header根据传入的t函数显示正确文本', () => {
  // 自定义Mock的t函数，返回我们想要的测试文本
  const mockTranslate = key => {
    const mockTranslations = {
      'app:cancel': '取消',
      'screenTitle': '分享页面'
    };
    return mockTranslations[key];
  };

  render(<HeaderRaw onCancel={() => {}} t={mockTranslate} />);
  
  expect(screen.getByText('取消')).toBeTruthy();
  expect(screen.getByText('分享页面')).toBeTruthy();
});

这个方案的优势是不需要Mock整个i18next库，测试完全聚焦在组件本身的逻辑上，非常适合单元测试。

方案3：用i18next测试工具库模拟真实环境 #

如果需要测试多语言场景，或者想更贴近真实的国际化环境，可以用i18next-testing-library来快速搭建测试用的i18n配置。

首先安装依赖：

npm install --save-dev i18next-testing-library

然后在测试文件里配置测试用的i18n环境：

import React from 'react';
import { render, screen } from '@testing-library/react-native';
import { setupI18n } from 'i18next-testing-library';
import { Header } from './Header';

// 初始化测试用的i18n配置
const i18n = setupI18n({
  resources: {
    en: {
      translation: {
        app: {
          cancel: 'Cancel'
        },
        shareWith: {
          screenTitle: 'Share With'
        }
      }
    },
    zh: {
      translation: {
        app: {
          cancel: '取消'
        },
        shareWith: {
          screenTitle: '分享给好友'
        }
      }
    }
  },
  lng: 'en', // 默认语言
});

test('Header显示正确的英文翻译', () => {
  render(<Header onCancel={() => {}} />);
  
  expect(screen.getByText('Cancel')).toBeTruthy();
  expect(screen.getByText('Share With')).toBeTruthy();
});

test('Header切换到中文后显示正确翻译', () => {
  // 切换语言
  i18n.changeLanguage('zh');
  render(<Header onCancel={() => {}} />);
  
  expect(screen.getByText('取消')).toBeTruthy();
  expect(screen.getByText('分享给好友')).toBeTruthy();
});

另外补充一点：测试组件的交互逻辑（比如点击取消按钮触发回调）的时候，和普通组件测试一样，只需要模拟点击事件，验证回调是否被调用即可，翻译逻辑不影响这部分测试。

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