callstack · k0ndee · Aug 31, 2026
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
@@ -95,7 +95,7 @@ const AppbarContent = ({
   titleMaxFontSizeMultiplier,
   mode = 'small',
   theme: themeOverrides,
-  testID = 'appbar-content',
+  testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -135,7 +135,7 @@ const AppbarContent = ({
           numberOfLines={1}
           accessible
           role={onPress ? 'none' : 'heading'}
-          testID={`${testID}-title-text`}
+          testID={testID ? `${testID}-title-text` : undefined}
           maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
           {title}

diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx
@@ -88,7 +88,7 @@ const AppbarHeader = ({
   mode = Platform.OS === 'ios' ? 'center-aligned' : 'small',
   elevated = false,
   theme: themeOverrides,
-  testID = 'appbar-header',
+  testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);

diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -335,7 +335,7 @@ const BottomNavigation = <Route extends BaseRoute>({
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
   compact: compactProp,
-  testID = 'bottom-navigation',
+  testID,
   theme: themeOverrides,
   getLazy = ({ route }: { route: Route }) => route.lazy,
 }: Props<Route>) => {
@@ -579,7 +579,7 @@ const BottomNavigation = <Route extends BaseRoute>({
         safeAreaInsets={safeAreaInsets}
         labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         compact={compact}
-        testID={`${testID}-bar`}
+        testID={testID ? `${testID}-bar` : undefined}
         theme={theme}
       />
     </View>

diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx
@@ -323,7 +323,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
   compact: compactProp,
-  testID = 'bottom-navigation-bar',
+  testID,
   theme: themeOverrides,
 }: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
@@ -495,7 +495,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
     >
       <Animated.View
         style={[styles.barContent, { backgroundColor }]}
-        testID={`${testID}-content`}
+        testID={testID ? `${testID}-content` : undefined}
       >
         <View
           style={[
@@ -509,7 +509,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
             },
           ]}
           role={'tablist'}
-          testID={`${testID}-content-wrapper`}
+          testID={testID ? `${testID}-content-wrapper` : undefined}
         >
           {routes.map((route, index) => {
             const focused = navigationState.index === index;

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -184,7 +184,7 @@ const Button = ({
   uppercase: uppercaseProp,
   contentStyle,
   labelStyle,
-  testID = 'button',
+  testID,
   accessible,
   background,
   maxFontSizeMultiplier,
@@ -292,7 +292,7 @@ const Button = ({
     <Surface
       {...rest}
       ref={ref}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       backgroundColor={backgroundOpacity < 1 ? 'transparent' : backgroundColor}
       {...touchableStyle}
       style={[
@@ -342,7 +342,10 @@ const Button = ({
       >
         <View style={[styles.content, { opacity: textOpacity }, contentStyle]}>
           {icon && loading !== true ? (
-            <View style={iconStyle} testID={`${testID}-icon-container`}>
+            <View
+              style={iconStyle}
+              testID={testID ? `${testID}-icon-container` : undefined}
+            >
               <Icon
                 source={icon}
                 size={customLabelSize ?? iconSize}
@@ -369,7 +372,7 @@ const Button = ({
             variant="labelLarge"
             selectable={false}
             numberOfLines={1}
-            testID={`${testID}-text`}
+            testID={testID ? `${testID}-text` : undefined}
             style={[
               styles.label,
               isMode('text')

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -141,7 +141,7 @@ const Card = ({
   style,
   contentStyle,
   theme: themeOverrides,
-  testID = 'card',
+  testID,
   accessible,
   disabled,
   ref,
@@ -225,13 +225,13 @@ const Card = ({
       style={[{ borderColor }, style]}
       theme={theme}
       elevation={elevation}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       {...rest}
     >
       {isMode('outlined') && (
         <View
           pointerEvents="none"
-          testID={`${testID}-outline`}
+          testID={testID ? `${testID}-outline` : undefined}
           style={[
             {
               borderColor,

diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -195,7 +195,7 @@ const Chip = ({
   textStyle,
   style,
   theme: themeOverrides,
-  testID = 'chip',
+  testID,
   selectedColor,
   showSelectedCheck = true,
   ellipsizeMode,
@@ -280,7 +280,7 @@ const Chip = ({
       elevation={elevation}
       transitionDuration={elevationTransitionDuration}
       {...rest}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       theme={theme}
     >
       <TouchableRipple

diff --git a/src/components/CrossFadeIcon.tsx b/src/components/CrossFadeIcon.tsx
@@ -44,7 +44,7 @@ const CrossFadeIcon = ({
   size,
   source,
   theme: themeOverrides,
-  testID = 'cross-fade-icon',
+  testID,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
 
@@ -109,14 +109,14 @@ const CrossFadeIcon = ({
       {hasPreviousIcon ? (
         <Animated.View
           style={[styles.icon, previousIconStyle]}
-          testID={`${testID}-previous`}
+          testID={testID ? `${testID}-previous` : undefined}
         >
           <Icon source={previousIcon} size={size} color={color} theme={theme} />
         </Animated.View>
       ) : null}
       <Animated.View
         style={[styles.icon, currentIconStyle]}
-        testID={`${testID}-current`}
+        testID={testID ? `${testID}-current` : undefined}
       >
         <Icon source={currentIcon} size={size} color={color} theme={theme} />
       </Animated.View>

diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx
@@ -111,7 +111,7 @@ const DrawerCollapsedItem = ({
   disabled,
   'aria-label': ariaLabel,
   badge = false,
-  testID = 'drawer-collapsed-item',
+  testID,
   labelMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
@@ -195,12 +195,12 @@ const DrawerCollapsedItem = ({
               style,
               animatedOutlineStyle,
             ]}
-            testID={`${testID}-outline`}
+            testID={testID ? `${testID}-outline` : undefined}
           />
 
           <View
             style={[styles.icon, { top: iconPadding }]}
-            testID={`${testID}-container`}
+            testID={testID ? `${testID}-container` : undefined}
           >
             {badge !== false && (
               <View style={styles.badgeContainer}>

diff --git a/src/components/FAB/Extended.tsx b/src/components/FAB/Extended.tsx
@@ -169,7 +169,7 @@ const Extended = ({
   labelMaxFontSizeMultiplier,
   background,
   style,
-  testID = 'extended-floating-action-button',
+  testID,
   theme: themeOverrides,
   ref,
 }: Props) => {

diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
@@ -131,7 +131,7 @@ const FAB = ({
   'aria-expanded': ariaExpanded,
   background,
   style,
-  testID = 'floating-action-button',
+  testID,
   theme,
   ref,
 }: Props) => (

diff --git a/src/components/FAB/Menu.tsx b/src/components/FAB/Menu.tsx
@@ -446,7 +446,6 @@ const MorphingTrigger = ({
         },
         visible ? styles.pointerEventsBoxNone : styles.pointerEventsNone,
       ]}
-      testID={testID}
     >
       <Shell
         size={size}
@@ -456,6 +455,7 @@ const MorphingTrigger = ({
         visible={visible}
         onPress={onPress}
         aria-label={ariaLabel}
+        testID={testID}
         widthShared={widthShared}
         heightShared={heightShared}
         borderRadiusShared={borderRadiusShared}
@@ -537,7 +537,7 @@ const Menu = ({
   alignment = 'end',
   closeIcon = 'close',
   items,
-  testID = 'floating-action-button-menu',
+  testID,
   theme: themeOverrides,
 }: MenuProps) => {
   const theme = useInternalTheme(themeOverrides);

diff --git a/src/components/FAB/Shell.tsx b/src/components/FAB/Shell.tsx
@@ -212,7 +212,7 @@ const Shell = ({
   overlay,
   children,
   style,
-  testID = 'fab-shell',
+  testID,
   theme: themeOverrides,
   ref,
 }: ShellProps) => {
@@ -319,7 +319,7 @@ const Shell = ({
         visible ? styles.pointerEventsAuto : styles.pointerEventsNone,
       ]}
       elevation={elevation}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       theme={theme}
     >
       <Animated.View style={[styles.clip, clipStyle]}>

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -121,7 +121,7 @@ const IconButton = ({
   mode,
   style,
   theme: themeOverrides,
-  testID = 'icon-button',
+  testID,
   loading = false,
   contentStyle,
   ref,
@@ -157,7 +157,7 @@ const IconButton = ({
   return (
     <Animated.View
       ref={ref}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       style={[
         styles.container,
         {
@@ -199,7 +199,12 @@ const IconButton = ({
           {loading ? (
             <ActivityIndicator size={size} color={iconColor} />
           ) : (
-            <IconComponent color={iconColor} source={icon} size={size} />
+            <IconComponent
+              color={iconColor}
+              source={icon}
+              size={size}
+              testID={testID ? `${testID}-icon` : undefined}
+            />
           )}
         </View>
       </TouchableRipple>

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -186,7 +186,7 @@ const Menu = ({
   visible,
   statusBarHeight,
   overlayAccessibilityLabel = 'Close menu',
-  testID = 'menu',
+  testID,
   anchor,
   onDismiss,
   anchorPosition,
@@ -691,7 +691,7 @@ const Menu = ({
             style={[styles.wrapper, positionStyle, style]}
             pointerEvents={pointerEvents}
             onAccessibilityEscape={onDismiss}
-            testID={`${testID}-view`}
+            testID={testID ? `${testID}-view` : undefined}
           >
             <Animated.View
               pointerEvents={pointerEvents}
@@ -707,7 +707,7 @@ const Menu = ({
                   shadowMenuAnimationStyle,
                 ]}
                 elevation={elevation}
-                testID={`${testID}-surface`}
+                testID={testID ? `${testID}-surface` : undefined}
                 theme={theme}
               >
                 <Animated.View

diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
@@ -148,7 +148,7 @@ const MenuItem = ({
   containerStyle,
   contentStyle,
   titleStyle,
-  testID = 'menu-item',
+  testID,
   'aria-label': ariaLabel,
   'aria-checked': ariaChecked,
   'aria-selected': ariaSelected,
@@ -220,7 +220,7 @@ const MenuItem = ({
             variant="bodyLarge"
             selectable={false}
             numberOfLines={1}
-            testID={`${testID}-title`}
+            testID={testID ? `${testID}-title` : undefined}
             style={[titleTextStyle, titleStyle]}
             maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
           >

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -135,7 +135,7 @@ function Modal({
   contentElevation,
   style,
   theme: themeOverrides,
-  testID = 'modal',
+  testID,
 }: Props) {
   const theme = useInternalTheme(themeOverrides);
 
@@ -235,7 +235,7 @@ function Modal({
         onPress={dismissable ? onDismissCallback : undefined}
         importantForAccessibility="no"
         style={[styles.backdrop, backdropStyle, backdropTransitionStyle]}
-        testID={`${testID}-backdrop`}
+        testID={testID ? `${testID}-backdrop` : undefined}
       />
       <View
         style={[
@@ -244,10 +244,10 @@ function Modal({
           style,
         ]}
         pointerEvents="box-none"
-        testID={`${testID}-wrapper`}
+        testID={testID ? `${testID}-wrapper` : undefined}
       >
         <Surface
-          testID={`${testID}-surface`}
+          testID={testID ? `${testID}-surface` : undefined}
           theme={theme}
           backgroundColor={contentBackgroundColor}
           borderRadius={contentBorderRadius}

diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -77,7 +77,7 @@ const ProgressBar = ({
   animatedValue,
   style,
   fillStyle,
-  testID = 'progress-bar',
+  testID,
   ...rest
 }: Props) => {
   const isWeb = Platform.OS === 'web';
@@ -213,7 +213,7 @@ const ProgressBar = ({
       >
         {width ? (
           <Animated.View
-            testID={`${testID}-fill`}
+            testID={testID ? `${testID}-fill` : undefined}
             style={[
               styles.progressBar,
               {