如何用jest+enzyme在react-native中按属性选中深层嵌套的Text/View元素

架构老林

2026-9-26

Enzyme 选择React Native深层嵌套元素的常用方案

以下是覆盖深层嵌套场景的实操方案：

优先使用testID属性匹配（最稳定的方案）
testID是React Native官方为测试场景预留的专属属性，不会对生产运行产生任何影响。你只需要给目标Text、View等原生元素绑定唯一testID，之后直接用Enzyme的属性选择器查找即可，不受嵌套层级限制：
示例组件代码：
```
<View testID="user-card">
  <View>
    <Text testID="user-name">张三</Text>
  </View>
</View>
```
查找代码：
```
// 直接跨层级查找对应testID的元素
const userNameText = wrapper.find(`[testID="user-name"]`);
```
如果需要限定查找范围，也可以先匹配外层容器再查找内层元素，避免出现重名testID时匹配错误：
```
const userNameText = wrapper.find(`[testID="user-card"]`).find(`[testID="user-name"]`);
```
根据文本内容匹配Text元素
如果目标Text元素没有设置testID，可以先全量匹配Text组件，再通过filter方法筛选对应文本的元素：
```
const targetText = wrapper.find('Text').filter(node => node.text() === '目标文本内容');
```
注意如果文本存在前后空格、格式化字符，需要先做trim处理再比较，避免匹配失败。
自定义组件内部元素查找
如果你要查找的元素在自定义组件内部，需要确保自定义组件把testID属性透传到内部对应的原生元素上，否则Enzyme无法直接捕获到自定义组件props里的testID：
示例自定义组件代码：
```
const CustomCard = (props) => {
  return (
    <View testID={props.cardTestId}>
      <Text testID={props.titleTestId}>{props.title}</Text>
    </View>
  )
}
```
调用时传参即可正常查找：
```
<CustomCard cardTestId="custom-card" titleTestId="custom-title" title="测试标题" />
```