React Native Jest测试报错：找不到setupDevtools模块

我是React Native新手，在尝试用Jest测试GUI显示功能时遇到了这个错误：

Cannot find module 'setupDevtools' from 'setup.js' at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:169:17)

我的package.json配置 #

{ 
  "name": "MiBase", 
  "version": "0.0.1", 
  "private": true, 
  "scripts": { 
    "start": "node node_modules/react-native/local-cli/cli.js start", 
    "test": "jest" 
  }, 
  "dependencies": { 
    "babel-preset-env": "^1.7.0", 
    "i": "^0.3.6", 
    "jest-react-native": "^18.0.0", 
    "react": "16.3.1", 
    "react-native": "0.55.3", 
    "react-native-datepicker": "^1.7.2", 
    "react-native-image-picker": "^0.26.7", 
    "react-native-ui-xg": "0.0.6", 
    "react-navigation": "^1.5.11" 
  }, 
  "devDependencies": { 
    "babel-jest": "^22.4.3", 
    "babel-preset-react-native": "3.0.0", 
    "jest": "22.4.3", 
    "react-test-renderer": "^16.3.1" 
  }, 
  "jest": { 
    "preset": "react-native", 
    "moduleNameMapper": { 
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__tests__/loginTest.js", 
      "\\.(css|sass)$": "<rootDir>/__tests__/loginTest.js" 
    }, 
    "transformIgnorePatterns": [ 
      "node_modules" 
    ], 
    "coveragePathIgnorePatterns": [ 
      "node_modules" 
    ], 
    "modulePathIgnorePatterns": [ 
      "node_modules" 
    ] 
  } 
}

测试文件内容（__tests__/loginTest.js） #

import 'react-native'; 
import React from 'react'; 
import HomeSreen from '../App'; 
import renderer from 'react-test-renderer'; 

test('renders correctly', () => { 
  const tree = renderer.create(<LoginScreen />).toJSON(); 
  expect(tree).toMatchSnapshot(); 
});

我已经参考了官方文档和相关问题尝试解决，但都没成功，目前只想测试GUI的显示功能，暂不涉及HTTP请求等逻辑。

解决方案 #

结合你使用的React Native 0.55.3和Jest 22.4.3版本，你可以尝试以下步骤来修复问题：

1. 移除冲突的依赖
   你安装的jest-react-native@18.0.0和当前Jest 22版本不兼容，而且react-native预设已经包含了该工具的核心功能，先卸载它：

   npm uninstall jest-react-native
   

2. 调整Jest配置中的转译规则
   你的transformIgnorePatterns设置成忽略所有node_modules，但React Native的部分依赖需要被转译才能正常测试。修改为只忽略非RN生态的模块：

   "jest": {
     "preset": "react-native",
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|sass)$": "<rootDir>/__mocks__/styleMock.js"
     },
     "transformIgnorePatterns": [
       "node_modules/(?!(react-native|react-navigation|react-native-datepicker|react-native-image-picker|react-native-ui-xg)/)"
     ]
   }
   

   同时，创建专门的mock文件替代原来指向测试文件的不合理配置：

   • 在项目根目录新建__mocks__/fileMock.js，内容为：module.exports = 'test-file-stub';
   • 新建__mocks__/styleMock.js，内容为：module.exports = {};

3. 修复测试文件中的组件引用错误
   测试文件里导入了HomeSreen（疑似拼写错误），但渲染时用的是<LoginScreen />，这会导致组件找不到的问题。修改为正确的组件路径和名称：

   import 'react-native'; 
   import React from 'react'; 
   import LoginScreen from '../path/to/LoginScreen'; // 替换成LoginScreen的实际文件路径
   import renderer from 'react-test-renderer'; 
   
   test('renders correctly', () => { 
     const tree = renderer.create(<LoginScreen />).toJSON(); 
     expect(tree).toMatchSnapshot(); 
   });
   

4. 清理缓存并重装依赖
   执行以下命令确保依赖环境干净：

   npm cache clean --force
   rm -rf node_modules
   rm package-lock.json
   npm install
   

完成这些步骤后，再运行npm test应该就能解决setupDevtools找不到的问题，成功生成组件的测试快照了。

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