React Native登录页渲染测试遇图片加载报错求助

我在对登录页面做渲染测试时，只要页面包含图片就会报错，不知道怎么解决。

测试代码：

it('render screen Login ', () => {render(<Login />);});

报错位置：

125 |             <Image
> 126 |               source={require('../../img/Login/facebook.png')}
      |                       ^
 127 |               style={styles.icon}
 128 |             />

错误文本：
无效返回值：
位于路径F:/app/green1/node_modules/react-native/jest/assetFileTransformer.js的代码转换器的process()或/和processAsync()方法，应返回一个对象或解析为对象的Promise。该对象必须包含带有处理后代码字符串的code属性。
此错误可能由Jest 28中的破坏性变更导致。

这个问题源于Jest 28对代码转换器的返回格式做了强制要求，而旧版React Native自带的资产转换器不兼容新规则。以下是几种可行的解决方式：

1. 自定义资产转换器 #

在项目根目录创建jest/assetsTransformer.js文件，内容如下：

const path = require('path');

module.exports = {
  process(src, filename) {
    return {
      code: `module.exports = ${JSON.stringify(path.basename(filename))};`,
    };
  },
};

接着在jest.config.js（或package.json的jest配置段）中替换默认转换器：

module.exports = {
  // 保留原有其他配置
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
    '^.+\\.(png|jpg|jpeg|gif|svg|ttf|woff|woff2)$': '<rootDir>/jest/assetsTransformer.js',
  },
};

2. 升级React Native版本 #

如果你的React Native版本较低，直接升级到0.70及以上版本——官方已经在这些版本中适配了Jest 28的转换器规则，无需额外配置。

3. 使用第三方 stub 转换器 #

安装jest-transform-stub：

npm install jest-transform-stub --save-dev
# 或用 yarn
yarn add jest-transform-stub --dev

然后在Jest配置中指定该转换器处理资产文件：

module.exports = {
  // 保留原有其他配置
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
    '^.+\\.(png|jpg|jpeg|gif|svg)$': 'jest-transform-stub',
  },
};

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