React Native集成Jest遇SyntaxError: Unexpected token '{'错误求助

我之前在React Native项目里配置Jest时也碰到过一模一样的错误，这种问题大多和语法转译、配置遗漏或者测试文件本身的语法问题有关。结合你的配置和测试代码，我整理了几个可行的解决思路：

1. 先修复测试文件的语法错误 #

仔细看你的App-test.js代码，最后一个describe块少了闭合的括号！这会直接导致Jest解析时抛出Unexpected token错误，先把这个问题解决：

describe('Some component', () => { 
  it('renders correctly', () => { 
    const tree = renderer.create(<SomeComponent />).toJSON(); 
    expect(tree).toMatchSnapshot(); 
  }); 
}); // 补充这个缺失的闭合括号

2. 确认Babel配置文件存在且正确 #

React Native项目需要明确的Babel配置来让Jest正确转译ES6+语法。如果你的项目根目录没有.babelrc或者babel.config.js，请创建babel.config.js文件，内容如下：

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

这个预设是React Native官方提供的，能确保Jest和Metro使用一致的转译规则。

3. 调整Jest的transformIgnorePatterns配置 #

你的配置里已经包含了一些需要转译的依赖，但可能遗漏了react-native-google-signin（即使你mock了它，实际项目代码里可能引入了它的未转译代码）。修改transformIgnorePatterns，把这个依赖添加进去：

"jest": { 
  "preset": "react-native", 
  "cacheDirectory": "./cache", 
  "coveragePathIgnorePatterns": [ "./app/utils/vendor" ], 
  "coverageThreshold": { "global": { "statements": 80 } }, 
  "transformIgnorePatterns": [ 
    "/node_modules/(?!react-native|react-clone-referenced-element|react-navigation|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native|react-native-google-signin)" 
  ] 
}

这个规则的意思是：除了括号里列出的依赖，其他node_modules里的包都跳过转译。确保所有用到的非转译第三方依赖都被包含进来。

4. 清除Jest缓存 #

缓存目录里的旧转译结果可能会导致奇怪的错误，运行以下命令清除缓存：

jest --clearCache

或者直接手动删除项目里的./cache目录，然后重新运行测试命令。

5. 检查依赖版本兼容性 #

你的babel-jest（24.9.0）和@babel/core（7.6.4）版本是兼容的，但如果前面的方法都无效，可以尝试升级Jest相关依赖到更稳定的版本（比如25.x或26.x），注意保持babel-jest和jest版本一致，同时确保和metro-react-native-babel-preset版本匹配。

内容的提问来源于stack exchange，提问作者César