React Native运行Jest报错ReferenceError: __DEV__ is not defined如何解决

解决方案 #

核心问题原因 #

你的配置存在3个核心错误：

1. 同时在package.json和jest.config.js中声明Jest配置，出现优先级冲突，导致部分配置不生效
2. babel.config.js中额外添加了@babel/preset-env，和metro-react-native-babel-preset的转译规则冲突，无法正确注入React Native全局变量
3. 最初使用.json文件作为setup配置，静态JSON无法执行全局变量赋值操作，且部分配置中__DEV__遗漏了前后双下划线

具体修复步骤 #

• 第一步：删除package.json中的jest配置段，所有Jest配置统一收敛到jest.config.js中，避免合并冲突
• 第二步：将jest.config.js替换为以下内容，直接在配置中声明全局变量，同时修正transform规则：

module.exports = {
  preset: "react-native",
  transformIgnorePatterns: [
    "node_modules/(?!(react-native|react-native-button|react-native-video|@react-native-async-storage)/)"
  ],
  globals: {
    __DEV__: true,
  },
  setupFiles: ['<rootDir>/__tests__/setup.js'],
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest",
  }
}

• 第三步：将__tests__/setup.js文件内容确认修改为以下代码，注意__DEV__前后均为双下划线：

global.__DEV__ = true

• 第四步：删除babel.config.js中的冗余@babel/preset-env，修改后内容如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset']
};

• 第五步：清除Jest缓存后重新运行测试：

npx jest --clearCache
npm run test

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