Jest测试中React Native Image组件source属性类型错误求助

1. 修正base64格式的source传递方式 #

React Native的Image组件接受的base64资源不能直接传字符串，必须包装成包含uri字段的对象：

// 错误写法
<Image source={Images.back} />

// 正确写法
<Image source={{ uri: Images.back }} />

直接传字符串会触发prop类型校验，因为Image期望source是number（本地资源ID）或带uri的对象（网络/ base64资源）。

2. 禁用Image组件自带的prop-types校验 #

ESLint的react/prop-types规则只管控自定义组件的校验，React Native原生Image组件自带的prop校验不会被该规则影响。可以在测试文件中mock掉Image的prop-types：

import { Image } from 'react-native';

// 在测试文件头部添加
jest.mock('react-native/Libraries/Image/Image', () => {
  const RealImage = jest.requireActual('react-native/Libraries/Image/Image');
  return {
    ...RealImage,
    propTypes: {}, // 清空原生prop校验规则
  };
});

3. 调整Jest静态资源映射的返回格式 #

确保moduleNameMapper处理图片资源时，返回的是符合Image组件要求的结构，而非纯字符串：

// jest.config.js 或 package.json中的jest配置
moduleNameMapper: {
  '\\.(png|jpg|jpeg|gif)$': '<rootDir>/__mocks__/imageMock.js',
}

在__mocks__/imageMock.js中定义返回结构：

module.exports = { uri: 'data:image/png;base64, mocked-base64-content' };

这样测试时Images.back会是带uri的对象，直接传给source就符合类型要求。

4. 尝试升级依赖（可选） #

当前使用的react-native@0.63.5版本较旧，部分Jest与React Native的兼容性问题可能在新版本中修复。如果上述方法无效，可以考虑升级到react-native 0.64+（注意同步匹配react和jest的兼容版本）。

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