React Native中Jest集成redux-persist快照测试遇import语法错误

你遇到的问题核心是：Jest默认会跳过node_modules目录下的代码转译，但redux-persist的es/integration/react.js里保留了未转译的ES6 import语法，导致Jest无法识别而抛出错误。下面是具体的解决步骤：

1. 修改Jest的转译忽略规则 #

需要在Jest配置中把redux-persist从默认的忽略列表中排除，让Jest对它的代码进行转译处理。

方式一：在package.json中配置 #

找到项目的package.json，添加或修改jest字段：

"jest": {
  "transformIgnorePatterns": [
    "node_modules/(?!(redux-persist|react-native)/)"
  ]
}

方式二：使用独立的jest.config.js配置 #

如果项目使用单独的jest.config.js文件，添加以下配置：

module.exports = {
  // 其他Jest配置项...
  transformIgnorePatterns: [
    'node_modules/(?!(redux-persist|react-native)/)',
  ],
};

这个配置的含义是：除了redux-persist和react-native，忽略node_modules中其他模块的转译——这两个模块的代码需要被Babel处理才能被Jest识别。

2. 确认Babel配置正确 #

确保你的Babel配置文件（.babelrc或babel.config.js）包含React Native的官方预设，示例如下：

// .babelrc
{
  "presets": ["module:metro-react-native-babel-preset"]
}

这个预设会自动处理React Native项目所需的ES6语法转译、JSX转换等工作。

完成上述配置后，重新运行快照测试，应该就能正常生成和匹配快照了。

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