Nested Text Elements not Detected

[Zidail]

For usage help, ask a question on Stack Overflow with the detox tag. The issues section of the project is meant for opening bug reports and enhancement requests of Detox. We use it to automatically track the change log

IMPORTANT: Use search before opening an issue. Duplicate issues will simply be closed.

Description

I'm using multiple nested text elements for different styles or inline text links, i.e. click here to open xxx.
When I'm trying to trigger the onPress using the .tap() method, it fails to detect the element.

Steps to Reproduce

Detox, Node, Device, Xcode and macOS Versions

<Text
  testID="text1"
>
   This is the outer text.
  <Text
     testID="text2"
   >
     This is a nested text.
   </Text>
</Text>

// test

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

text2 will fail to be detected.

• Detox: 8.0.0
• React Native: 0.51.0
• Node: 9.11.2
• Device: iPhone X 11.4
• Xcode: 9.4.1
• macOS: 10.13.5

Device and verbose Detox logs

Error: Cannot find UI Element.
Exception with Assertion: {
"Assertion Criteria" : "assertWithMatcher:matcherForSufficientlyVisible(>=0.750000)",
"Element Matcher" : "(((respondsToSelector(accessibilityIdentifier) && accessibilityID('text2')) && !(kindOfClass('RCTScrollView'))) || (kindOfClass('UIScrollView') && ((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && ancestorThatMatches(((respondsToSelector(accessibilityIdentifier) && accessibilityID('loginButton')) && kindOfClass('RCTScrollView'))))))",
"Recovery Suggestion" : "Check if the element exists in the UI hierarchy printed below. If it exists, adjust the matcher so that it accurately matches element."
}

[support]

We use the issue tracker exclusively for bug reports and feature requests. This issue appears to be a general usage or support question. Instead, please ask a question on Stack Overflow with the detox tag.

[Zidail]

@LeoNatan I do believe that this is an actual issue as the nested element doesn't actually display a testID at all even when inspecting the native element which prevents the tap() action. The text object is merged into one during inspection and theres no testID attached to it.

According to the react native documentation React Native converts this to a flat NSAttributedString or SpannableString. So during the merge it seems to have lost the testID which prevents the tap().

But to respect your decision, I've posted it in SO as well.

Either way, I would very much like to hear what you have to say on this topic, and if you still feel that this is more suitable for stack overflow I won't press the issue any further.

Thanks! 😄

[LeoNatan]

Since this is not a Detox issue, I don't think it should be here. React Native merges nested elements into one (seemingly untestable) element. You should either open an issue in the RN issue tracker asking for clarification or report a bug why testIDs are not bubbled to the container object (I don't think it's possible to achieve), or consult Stack Overflow with alternative strategies of how to achieve what you are trying to achieve. This is not a bug in Detox.

[Zidail]

@LeoNatan Thank you for taking the time to give me a solid answer.
I thought about what you said and I agree that this is indeed not a bug in Detox.
I originally thought that detox should be able to pass all the way down to the object, but after digging through a bit more, I too came to the realization that this is a React-Native thing and not Detox. Thanks again! 😄

[LeoNatan]

Yep, if there is no object, there is nothing to find by Detox.