React Native用Enzyme测试onPress报Unexpected token '<'错误及多按钮触发问题

• 核心问题为Jest配置中的文件转换规则未覆盖.tsx后缀文件：你当前配置的transform正则仅匹配.js、.ts后缀文件，你的测试文件为.tsx格式，内部包含JSX语法，没有被ts-jest处理，因此Jest无法识别<开头的JSX标签，直接抛出语法错误。
• 次要排查点：请确认项目根目录的tsconfig.json中compilerOptions配置项已开启JSX支持，React17及以上版本设置为"jsx": "react-jsx"，更低版本设置为"jsx": "react"即可。

修复方案 #

修改你的test.config.js中transform配置的匹配规则，覆盖.tsx、.jsx后缀：

module.exports = {
  // 其余配置保持不变
  transform: {
    "^.+\\.(js|ts|tsx|jsx)$": "ts-jest",
  },
}

额外注意：使用enzyme测试React Native前需要先配置对应版本的适配器，避免后续运行出现适配错误，在测试文件顶部添加如下代码即可：

import enzyme from 'enzyme';
// 适配器版本和你项目使用的React版本保持一致
import Adapter from 'enzyme-adapter-react-18';
enzyme.configure({ adapter: new Adapter() });

推荐按优先级选择以下方案：

• 方案1：通过testID定位（最稳定，React Native测试官方推荐实践）
  先在业务代码的目标Button上添加testID属性：

  <Button title="Confirm" testID="confirm-btn" onPress={()=>console.log('a')}/>
  

  测试时直接按testID匹配即可：

  wrapper.find('[testID="confirm-btn"]').prop('onPress')?.({} as any)
  

• 方案2：通过Button的title属性筛选（适合无testID的存量代码）

  wrapper.findWhere(node => 
    node.type() === Button && node.prop('title') === 'Confirm'
  ).prop('onPress')?.({} as any)
  

• 方案3：按索引定位（不推荐，仅用于临时测试，Button顺序变更会导致测试失效）
  取页面第2个Button（索引从0开始）的示例：

  wrapper.find(Button).at(1).prop('onPress')?.({} as any)
  

内容的提问来源于stack exchange，提问作者A._