Duplicated `testID` on `RectButton` (iOS and Fabric only)

[stigi]

Description

We are using Detox to run e2e test on our application. We noticed that after upgrading to version 2.25.0 (applies for all versions up to 2.28.0 which is current at time of writing) the by.id test matcher (docs) does no longer work for RectButtons on iOS.

While debugging the issue I noticed that the testID is applied in two places in the view hierarchy. The Component View and the actual UIControl:

Here's an excerpt of the view hierarchy of such a failing test. Notice how id="sign-in-button" appears twice:

<RNGestureHandlerButtonComponentView class="RNGestureHandlerButtonComponentView" id="sign-in-button" label="Get started">
    <RNGestureHandlerButton class="RNGestureHandlerButton" id="sign-in-button" label="Get started">
        <RCTViewComponentView class="RCTViewComponentView" />
        <RCTParagraphComponentView class="RCTParagraphComponentView" label="Get started" text="Get started">
            <RCTParagraphTextView class="RCTParagraphTextView" />
        </RCTParagraphComponentView>
    </RNGestureHandlerButton>
</RNGestureHandlerButtonComponentView>

This causes Detox to fail, when looking for the object:

Test Failed: Multiple elements found for "MATCHER(id == "sign-in-button")"

I believe this might have been introduced in PR #3444 (appeared first in version 2.25.0).

Steps to reproduce

I've created a repository with a minimal reproduction scenario: https://github.com/stigi/gesture-handler-testid-bug

• git clone https://github.com/stigi/gesture-handler-testid-bug.git
• cd gesture-handler-testid-bug; npm i
• npm run detox:build:ios
• npm run detox:test:ios -- --loglevel verbose (in a 2nd terminal)

Depending on your local setup you might have to adjust which simulator Detox chooses to test with here.

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

https://github.com/stigi/gesture-handler-testid-bug/

Gesture Handler version

2.25.0

React Native version

0.79.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Using Expo Prebuild or an Expo development build

Architecture

New Architecture (Fabric)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[m-bert]

Hi @stigi!

I believe this might have been introduced in PR https://github.com/software-mansion/react-native-gesture-handler/pull/3444 (appeared first in version 2.25.0).

It could. This PR introduced correct application of accessibility props on iOS. However, I can see that testID was already fixed earlier, in #3290. If possible, I'd prefer to leave changes done in #3444.

Could you please check if reverting changes from #3290 works? I know that in this case we are dealing with 2 different test frameworks so I'd like to make sure that nothing breaks.

[stigi]

@m-bert Good call! 👍

I wasn't aware of #3290 and will take a look.

Just to clarify, I didn't intend to put any blame on any single PR, I just noticed that the issue correlated. I highly apreciate all the work that goes into this library! 🙌 🙏

Looking forward on helping to get this sorted 😃

[m-bert]

Just to clarify, I didn't intend to put any blame on any single PR

Sure, I don't say you wanted to. It is great that you found out this correlation, thank you for your time! 😄

[Wahsner]

Hi,

I appear to be getting the same error, Test Failed: Multiple elements found for "MATCHER(id == "login-button-basic")", when using the BorderlessButton and setting the testID prop.

This is causing all my tests to now fail when running detox.