LoginScreen.test.js中React组件类型无效问题排查与解决请求

核心问题分析 #

出现“React组件类型无效”错误，结合代码与配置排查出三个关键问题：

• 测试代码未导入@testing-library/react-native提供的render方法
• Jest配置误用了Web端的jsdom测试环境，与React Native的原生测试环境不兼容
• 依赖版本存在严重冲突：Jest 29.x与旧版babel-jest、react-native 0.64.x不匹配

分步修复方案 #

1. 修正测试文件代码 #

补充render方法的导入，并修正快照断言的调用方式（toJSON是方法需执行）：

import { Text } from 'react-native';
import { render } from '@testing-library/react-native'; // 新增render方法导入

it("Login_Screen_should_render_correctly", () => {
  const { toJSON } = render(<Text>hey</Text>);                             
  expect(toJSON()).toMatchSnapshot(); // 调用toJSON方法生成快照
  expect(true).toEqual(true);
});

2. 调整Jest配置 #

移除Web环境依赖，使用React Native适配的测试环境：
修改jest.config.js：

module.exports = {
  preset: 'react-native',
  moduleNameMapper: {
    "\\.(png|jpg|svg)$": "<rootDir>/__mocks__/images.js"
  },
  setupFiles: ['./jest.setup.js'],
  testEnvironment: 'node', // 显式指定Node环境，或直接移除，react-native preset会自动处理
};

3. 修复依赖版本兼容性 #

将Jest相关依赖降级至与react-native 0.64.x兼容的版本，并移除无用的Web环境依赖：
修改package.json中的依赖项：

"@testing-library/react-native": "^11.5.0",
"babel-jest": "^26.6.3",
"jest": "^26.6.3",
"jest-circus": "^26.6.3",
// 移除"jest-environment-jsdom-fifteen": "^1.0.2"

执行npm install或yarn install更新依赖。

验证 #

完成上述修改后运行测试，Login_Screen_should_render_correctly测试用例将无错误通过。

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