React-Native中用Detox测试react-native-elements组件失败如何解决？

我之前也碰到过一模一样的情况，react-native-elements的组件因为封装层级的原因，经常会让Detox没法直接通过testID或文本定位到可点击的核心元素，下面是几个亲测有效的解决方案：

1. 把testID直接传递到底层触摸组件 #

react-native-elements的Button虽然表面支持testID属性，但在Android环境下，这个testID可能只绑定在了外层容器上，而非真正可点击的TouchableOpacity/TouchableNativeFeedback组件。你可以通过touchableProps把testID直接传给底层触摸组件：

<Button 
  testID='testButton'
  touchableProps={{ testID: 'testButtonTouchable' }}
  title="Add Product"
  // 其他属性
/>

然后在测试代码里定位这个触摸组件的testID：

await element(by.id('testButtonTouchable')).tap();

2. 结合组件类型+文本/祖先元素定位 #

如果纯文本定位失败，大概率是因为文本被嵌套在内部的Text组件里，你可以通过组合条件来定位：

• 找文本元素的祖先容器：

await element(by.text('Add Product').withAncestor(by.id('testButton'))).tap();

• 找包含目标文本的触摸组件：

await element(by.type('TouchableOpacity').and(by.hasDescendant(by.text('Add Product')))).tap();

3. 用accessibilityId替代testID #

在Android环境下，Detox对accessibility属性的识别有时候会更稳定，你可以给Button设置accessibilityLabel，然后用by.accessibilityId定位：

<Button 
  accessibilityLabel='addProductButton'
  title="Add Product"
  // 其他属性
/>

测试代码：

await element(by.accessibilityId('addProductButton')).tap();

4. 升级react-native-elements到最新版 #

部分旧版本的react-native-elements存在testID传递不完整的bug，升级到最新稳定版大概率能解决这个问题：

npm install react-native-elements@latest
# 或者用yarn
yarn add react-native-elements@latest

5. 打印视图层级排查（Debug用） #

如果以上方法都不行，你可以用Detox的命令打印当前屏幕的视图层级，看看Button的testID和文本到底绑定在哪个元素上，再针对性调整定位逻辑：

detox print-hierarchy -c android.emu.debug

（把android.emu.debug替换成你自己的Detox配置名称）

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