React Native Testing Library 中 Unexpected token 'export' 错误分析与解决方案

问题背景

在使用 React Native Testing Library 进行组件测试时，开发者可能会遇到 "Unexpected token 'export'" 的错误提示。这个问题通常出现在升级 React Native 版本后，特别是在从 0.72.x 升级到 0.73.x 版本时较为常见。

错误表现

当运行测试用例时，控制台会显示类似以下错误信息：

Trying to detect host component names triggered the following error:
Unexpected token 'export'

错误通常指向测试文件中的 render() 方法调用处，表明测试框架在解析组件时遇到了意外的 ES6 export 语法。

根本原因

经过分析，这个问题主要与 Babel 配置有关。在 React Native 0.73.x 版本中，Babel 的默认配置发生了变化，而许多开发者会按照旧版本的配置方式或者某些教程添加不必要的 preset，导致测试环境无法正确解析模块。

解决方案

1. 检查并简化 Babel 配置

正确的 babel.config.js 应该保持简洁：

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

许多开发者错误地添加了以下配置，这些在 React Native 0.73.x 中通常是不必要的：

// 以下配置可能导致问题，建议移除
['@babel/preset-env', { targets: { node: 'current' } }]
'@babel/preset-typescript'

2. 特定场景下的解决方案

对于使用 Expo 的项目，配置应简化为：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo']
  };
};

3. 插件处理

如果项目中使用了 react-native-reanimated 等插件，确保它们被正确配置：

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-reanimated/plugin']
};

进阶建议

1. 版本兼容性检查：确保 React Native Testing Library 的版本与 React Native 版本兼容

2. 新建项目对比：当遇到配置问题时，可以创建一个全新的 React Native 项目，对比其默认配置与现有项目的差异

3. 逐步排查：如果简化配置后出现其他问题（如某些依赖无法正确转换），应该逐个添加必要的 preset 和 plugin，而不是一次性恢复所有配置

总结

"Unexpected token 'export'" 错误通常是由于 Babel 配置不当导致的。在 React Native 0.73.x 版本中，Babel 的默认配置已经足够处理大多数场景，过度配置反而会导致问题。开发者应该遵循"最小配置"原则，只在确实需要时才添加额外的 preset 或 plugin。

通过合理简化 Babel 配置，大多数情况下可以解决这个测试错误，同时保持项目的其他功能正常运作。如果问题仍然存在，建议检查项目依赖版本是否兼容，或者创建一个最小复现案例以便进一步分析。