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

Question

我似乎在detox检测嵌套元素方面遇到了一些问题。我已经创建了一个内联链接，需要点击它来查看我的测试进度。

样本代码：

<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()应用于它

我知道一个可能的解决方案是，我们可以将嵌套的text组件封装在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目前不支持嵌套在内部。

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

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

Answer 2

在某些情况下，我也解决了这个问题，方法是选择父文本，并使用tapAtPoint()而不是tap():

// JSX
<Text testID="login">
<Text>Already have account?</Text>
<Text onPress={}>Login</Text>
</Text>
// Test
await element(by.id('login')).tapAtPoint({ x: 150, y: 50 });

它比我通常想要的更脆，但它确实适用于没有在不同设备屏幕大小上呈现一致边界的组件的情况。另外，它允许您使用"React recommended"的方式进行文本外观或行为定制，这样您的JSX看起来会更加一致。