Detox: Unable to match Text wrapped in Text

[hiaw]

Unable to match a touchable text wrapped in text

Description

In order to have a long string of text separated with touchable text, one need to wrap Text within Text as below. But I am unable to match the touchable text.

Steps to Reproduce

This is the render code

  <Text>
    {over21}

    <Text onPress={termsAndCondition}>{tnc}</Text>

    <Text>{and}</Text>

    <Text onPress={privacyPolicy}>{privacy}</Text>

    <Text>{other}</Text>
  </Text>

I then try to matching using the following but unable to get a match

await element(by.text({privacy})).tap()

When I inspect it using Xcode View Hierarchy tool I only see a single RCTText element.

Node, Device, Xcode and macOS Versions

Node: 8.6.0
Device: Macbook Pro, iPhone 7
Xcode: 8.3.3
macOS: 10.12.6

[isnifer]

@hiaw just add testID and use id matcher

[hiaw]

@isnifer Thanks for the tip. Tried that and didn't work.

[LeoNatan]

You should be tapping on the switch element, not the text. Add an identifier to the switch and .tap() that.

[hiaw]

@LeoNatan You suggestion was not related to my issue. Yes there is a Switch next to the Text of interest but I'm asking about the Text, not the Switch.

[LeoNatan]

On iOS, tapping on text does not trigger switches. Is this a custom functionality that you have added?

[hiaw]

I'm not trying to tap the Switch, I can do that no problem.

I'm trying to tap Terms and Condition and Privacy Policy Text. And I couldn't as describe in the issue.

Thanks.

[rotemmiz]

React Native’s render mechanism probably optimizes your view, so the end result rendered in native doesn’t have the same view hierarchy as you defined in JSX.
Try playing with your JSX view hierarchy and watch what is generated in native

[LeoNatan]

@hiaw Don't take closing the issue personally. You problem was not clear to me from your issue. I tend to close issues quickly. After all, reopening an issue is a click away.

[hiaw]

@rotemmiz Thanks for the comment. As mentioned before In order to have a long string of text separated with touchable text, one need to wrap Text within Text. So yes you're right that it optimizes my view and so it appears as a single RCTText in native.

[rotemmiz]

Whatever you do in JSX is not noticable for Deto, as it ONLY asserts on the native view hierarchy.
So, my comment still stands, try playing with your JSX until RN generates a view to your likings.

[rotemmiz]

Whatever you do in JSX is not noticable for Deto, as it ONLY asserts on the native view hierarchy.
So, my comment still stands, try playing with your JSX until RN generates a view to your liking.

[LeoNatan]

Hello,

We are moving support questions to Stack Overflow. Please ask a question there with the detox tag. This section is only meant for Detox issues and enhancement requests.

Thanks

[monmonja]

If anyone is still looking at this, with react native 0.54.2, detox ^7.3.2, you can do something like

<Text style={styles.helloText}>agree to 
      <TouchableOpacity style={{ marginTop: -2 }} testID="termsBtn">
          <Text style={styles.helloText}>Terms</Text>
      </TouchableOpacity>
</Text>

then got this to work

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

[wildseansy]

@monmonja - I did the same. I don't think this is a detox or React Native issue though, it's a problem with clickable NSAttributedStrings on the native side. Talking to another dev, it sounds like he had the same issue with testing strings like this in a non-React Native app.