如何让 Detox 点击具有 onPress 的嵌套文本元素？

Question

我似乎在排毒检测嵌套元素方面遇到了一些问题。我创建了一个内联链接，需要单击它才能进行测试。

示例代码：

<Text>
  This is the outer text
  <Text
    onPress={() => {}}
    testID="clickable"
  >
    This is a clickable text component
  </Text>
</Text>

它的外观：

这是外部文本这是一个可点击的文本组件

失败测试：

await expect(element(by.id('clickable'))).toBeVisible();

现在我的问题是，testID无法检测正因为如此clickable不能有.tap()appled它。

我知道一个可能的解决方案是我们可以将嵌套text组件包装在 a 中，view但这需要我确切地知道width和height是什么，因为总是显示一个错误，比如views nested within a <Text> must have a width and height. 这是不可能的，因为我有翻译，width并且height可能总是不同的。

我也试过直接将.tap()动作分配给外部text组件，但由于字符串的长度，动作甚至没有接近testID.

使用 Xcode 仔细检查原生 iOS 元素后，似乎testID没有将 分配给该特定部分，整个组件只是一个巨大的字符串，这可能可以解释为什么testID找不到 。

对这个问题的任何帮助将不胜感激。谢谢！

Answer 1

正如您已经注意到的，testID 不会传播到子字符串。因此 testID 不会出现在视图层次结构中，因此 Detox 也找不到它。

第一个想法可能是将您想要可点击的文本包装在 TouchableOpacity （或类似的）中，但这只会导致不变的冲突，因为 React-Native 目前不支持内部嵌套。

另一种方法是使用视图来定位文本，同时删除嵌套文本，以便可以在视图层次结构中找到 testID。通过执行以下操作，您可以获得与您想要的类似的结果：

<View style={{flexDirection: 'row'}}>
    <Text>This is the outer text </Text>
    <Text onPress={() => {}} testID="clickable">
        This is a clickable text component
    </Text>
</View>