使用Jest mock react-native的Appearance模块解决单元测试报错问题

正确解法 #

核心逻辑是mock react-native 模块时保留原有全部内置内容，仅覆盖Appearance相关的API，避免丢失其他原生模块方法。

单测试文件生效 #

在测试文件的最顶部（所有import语句之前）加入以下代码：

jest.mock('react-native', () => {
  // 引入react-native原有所有模块内容
  const originalRN = jest.requireActual('react-native');
  return {
    ...originalRN,
    Appearance: {
      // 保留Appearance的原有其他属性
      ...originalRN.Appearance,
      // mock你用到的方法
      getColorScheme: jest.fn(() => 'light'),
      useColorScheme: jest.fn(() => 'light'),
      // 如果用到监听方法也可以一起mock
      addChangeListener: jest.fn(),
      removeChangeListener: jest.fn(),
    },
  };
});

测试过程中可以随时切换返回值：

import { Appearance } from 'react-native';

// 测试深色模式场景
test('测试深色主题适配逻辑', () => {
  Appearance.getColorScheme.mockReturnValueOnce('dark');
  // 此处写你的测试逻辑
});

// 测试浅色模式场景
test('测试浅色主题适配逻辑', () => {
  Appearance.getColorScheme.mockReturnValueOnce('light');
  // 此处写你的测试逻辑
});

全局所有测试生效 #

如果需要所有测试都默认mock Appearance，把上面的jest.mock逻辑放到jest配置的全局初始化文件中即可：

1. 打开jest.config.js，找到setupFilesAfterEnv配置项，加入你的初始化文件路径（比如./jest-setup.js）
2. 在jest-setup.js中写入上面的jest.mock代码，之后所有测试都会自动生效。

之前方案的错误原因 #

• mockComponent是用来mock原生UI组件的工具，不适用Appearance这种纯API类型的模块
• 直接重写整个react-native的返回值会覆盖掉所有原有内置方法，导致requireNativeComponent这类系统方法丢失报错，使用jest.requireActual保留原有内容即可避免该问题。

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