Not possible to pass TestID to the tabs

[dwightdhooge]

Possible to add testID to the tabs ? so we can identify It easiliy in automation

<TouchableOpacity style={[styles.container, tabStyle]} disabled={!enabled} onPress={onSelect} accessibilityHint={accessibilityHint} testID={testID}
...

[markymc]

@dwightdhooge I made a patch-package patch for this:

Create patches/@react-native-segmented-control+segmented-control+2.5.2.patch

Paste:

diff --git a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js
index 7a29d1c..087e7f0 100644
--- a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js
+++ b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js
@@ -26,7 +26,8 @@ type Props = $ReadOnly<{|
   fontStyle?: FontStyle,
   activeFontStyle?: FontStyle,
   tabStyle?: ViewStyle,
-  appearance?: 'dark' | 'light' | null,
+  appearance ?: 'dark' | 'light' | null,
+  testID?: string,
   accessibilityHint?: string,
 |}>;
 
@@ -46,6 +47,7 @@ export const SegmentedControlTab = ({
   activeFontStyle = {},
   appearance,
   tabStyle,
+  testID,
   accessibilityHint,
 }: Props): React.Node => {
   const colorSchemeHook = useColorScheme();
@@ -93,7 +95,7 @@ export const SegmentedControlTab = ({
       accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       accessibilityState={{selected: selected, disabled: !enabled}}>
-      <View style={styles.default}>
+      <View testID={value} style={styles.default}>
         {typeof value === 'number' || typeof value === 'object' ? (
           <Image source={value} style={styles.segmentImage} />
         ) : isBase64(value) ? (

@Naturalclar would be amazing to have this in the lib so a patch isn't needed.

[Naturalclar]

@markymc thanks for the ping! will make a PR and publish new version today

[markymc]

@Naturalclar thanks so much for the quick response!

(Also I see you're just down the road in Chiba! I'm in Shibuya 😊)

[markymc]

@Naturalclar I just tried the new version and for some reason now my tests (Cypress on Web) are failing. However, if I apply the following change, they start passing again:

diff --git a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js
index 99bdc2e..7779de8 100644
--- a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js
+++ b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js
@@ -112,6 +112,7 @@ const SegmentedControl = ({
           values.map((value, index) => {
             return (
               <SegmentedControlTab
+                testID={value}
                 enabled={enabled}
                 selected={selectedIndex === index}
                 accessibilityHint={`${

Actually, looking at my initial patch, I don't really understand how my tests ever passed! There's no testID passed to the SegmentedControlTab from the SegmentedControl, so of course a testID doesn't get set!

I'm in the middle of a lot of dependency upgrades so I'm not sure what changed that causes those tests to not pass now (or conversely why they were passing when they shouldn't have), but if I find out I'll let you know.