如何使用Jest为React Native自定义useColorScheme Hook编写单元测试

测试React Hook不能直接在测试用例函数作用域内调用，必须在React组件的渲染上下文中执行，目前通用的解决方案是使用React Testing Library提供的renderHook工具，具体操作步骤如下：

依赖准备 #

Expo 初始化的 React Native 项目默认已集成 @testing-library/react-native，该库已内置 renderHook 方法，无需额外安装第三方依赖。如果项目中缺少该依赖，可执行以下命令安装：

yarn add @testing-library/react-native --dev

测试代码实现 #

你当前的测试代码直接在测试回调中调用Hook，违反了Hook只能在React函数组件内部调用的规则，使用renderHook可以为目标Hook创建合规的运行上下文。
同时由于你的自定义Hook依赖React Native原生的useColorScheme能力，测试前需要先mock该原生方法，模拟不同的返回值覆盖所有测试场景，完整测试代码如下：

import { renderHook } from '@testing-library/react-native';
import { useColorScheme as _nativeUseColorScheme } from 'react-native';
import useColorScheme from "../useColorScheme";

// Mock React Native 原生的 useColorScheme 方法
jest.mock('react-native', () => ({
  ...jest.requireActual('react-native'),
  useColorScheme: jest.fn(),
}));

describe('自定义 useColorScheme Hook', () => {
  it('正确返回亮模式配色值', () => {
    (_nativeUseColorScheme as jest.Mock).mockReturnValue('light');
    const { result } = renderHook(() => useColorScheme());
    expect(result.current).toBe('light');
  });

  it('正确返回暗模式配色值', () => {
    (_nativeUseColorScheme as jest.Mock).mockReturnValue('dark');
    const { result } = renderHook(() => useColorScheme());
    expect(result.current).toBe('dark');
  });

  it('原生返回空值时仍返回非空结果', () => {
    (_nativeUseColorScheme as jest.Mock).mockReturnValue(null);
    const { result } = renderHook(() => useColorScheme());
    expect(result.current).not.toBeNull();
    expect(result.current).not.toBeUndefined();
  });
});

核心逻辑说明 #

• renderHook 接收一个返回目标Hook调用的函数，内部会自动创建临时React组件运行该Hook，完全符合React Hook的调用规则
• 执行renderHook后返回的result.current就是目标Hook的返回值，可直接使用Jest断言做校验
• 对于依赖外部能力的Hook，通过mock依赖的返回值即可覆盖所有边界场景的测试需求

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