使用Jest测试withTheme HOC包裹的React Native CheckBox组件遇阻求助

1. 精准Mock useTheme钩子 #

多数withTheme HOC内部依赖useTheme钩子，需根据你的主题库（如react-native-paper、@react-navigation/native）针对性Mock，确保返回组件所需的主题字段：

import { useTheme } from 'react-native-paper';

jest.mock('react-native-paper', () => ({
  ...jest.requireActual('react-native-paper'),
  useTheme: jest.fn(() => ({
    colors: {
      primary: '#007AFF',
      checkboxBg: '#FFFFFF',
      checkboxBorder: '#CCCCCC',
      // 按需添加组件用到的所有主题色值
    },
  })),
}));

2. 优先测试原始未包裹组件 #

避免直接测试withTheme(CheckBox)，在组件文件中同时导出原始组件和HOC包裹后的版本：

// CheckBox.js
export const RawCheckBox = ({ theme, checked, onChange, ...props }) => {
  // 原始组件逻辑，直接使用传入的theme
  return (
    <View style={{ borderColor: theme.colors.checkboxBorder }}>
      {/* 组件内容 */}
    </View>
  );
};

export default withTheme(RawCheckBox);

测试时导入RawCheckBox，手动传入主题props，无需依赖HOC：

import { RawCheckBox } from './CheckBox';
import { render } from '@testing-library/react-native';

test('renders with correct theme styles', () => {
  const { getByTestId } = render(
    <RawCheckBox 
      testID="raw-checkbox"
      theme={{ colors: { checkboxBorder: '#000' } }}
    />
  );
  expect(getByTestId('raw-checkbox')).toHaveStyle({ borderColor: '#000' });
});

3. Mock withTheme HOC本身（若需测试包裹后组件） #

如果必须验证HOC包裹后的组件行为，直接让Mock的withTheme返回原始组件：

import { withTheme } from 'react-native-paper';

jest.mock('react-native-paper', () => ({
  ...jest.requireActual('react-native-paper'),
  withTheme: jest.fn((Component) => Component),
}));

此时导入的默认导出（withTheme(RawCheckBox)）等价于原始组件，可正常传入props测试。

4. 处理交互测试 #

若组件包含选中状态切换等交互，使用fireEvent模拟用户操作：

import CheckBox from './CheckBox';
import { fireEvent, render } from '@testing-library/react-native';

test('toggles checked state on press', () => {
  const mockOnChange = jest.fn();
  const { getByTestId } = render(
    <CheckBox testID="checkbox" checked={false} onChange={mockOnChange} />
  );
  
  fireEvent.press(getByTestId('checkbox'));
  expect(mockOnChange).toHaveBeenCalledWith(true);
  
  fireEvent.press(getByTestId('checkbox'));
  expect(mockOnChange).toHaveBeenCalledWith(false);
});

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