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

Question

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

示例代码:

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

它的外观:

这是外文 This is a clickable text component

失败测试:

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

现在我的问题是 testID无法检测到，因此 clickable不能有 .tap()应用到它。

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

我也试过直接分配 .tap()对外行动 text组件，但由于字符串的长度， Action 甚至无法接近 testID .

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

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

Answer 1

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

第一个想法可能是将您想要在 TouchableOpacity(或类似的)中点击的文本包装起来，但这只会导致不变违规，因为 React-Native 目前不支持 inside 的嵌套。

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

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