React Native 0.68.2+Jest29.0测试报错：Invalid return value求助

核心问题原因 #

Jest 28及以上版本对代码转换器（transformer）的返回格式做了强制规范：process()/processAsync()必须返回包含code属性的对象（或Promise解析为该对象），但React Native 0.68.x自带的assetFileTransformer.js仍采用旧的返回逻辑（直接返回字符串），导致兼容性报错。

解决步骤 #

1. 自定义资产转换器 #

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

const path = require('path');

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

2. 更新Jest配置 #

修改项目中的jest.config.js（无则创建）或package.json内的Jest配置，将资产文件的转换指向自定义转换器：

方式1：使用jest.config.js

module.exports = {
  preset: 'react-native',
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
    '^.+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$': '<rootDir>/jest/assetsTransformer.js',
  },
};

方式2：使用package.json

"jest": {
  "preset": "react-native",
  "transform": {
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
    "^.+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "<rootDir>/jest/assetsTransformer.js"
  }
}

3. 修复测试代码的小问题 #

你的测试代码存在两处可优化点：

• 未导入waitFor方法
• App组件已包含NavigationContainer，无需重复嵌套

修改后的测试代码：

import React from 'react';
import { render, waitFor, screen } from "@testing-library/react-native";
import App from '../App';

describe('App', () => {
  test('shall render splash screen', async () => {
    render(<App />);
    await waitFor(() => screen.getByText('AppSplash'));
  });
});

4. 确保依赖版本匹配 #

安装与Jest 29.x兼容的babel-jest版本：

yarn add -D babel-jest@^29.0.0

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