From 10ebef0db2294df8cdef5f87217fb947690f23ee Mon Sep 17 00:00:00 2001 From: Konrad Rydygier Date: Mon, 31 Aug 2026 15:54:32 +0200 Subject: [PATCH 1/2] fix: remove hardcoded default testIDs from components --- src/components/Appbar/AppbarContent.tsx | 4 +- src/components/Appbar/AppbarHeader.tsx | 2 +- .../BottomNavigation/BottomNavigation.tsx | 4 +- .../BottomNavigation/BottomNavigationBar.tsx | 6 +-- src/components/Button/Button.tsx | 11 +++-- src/components/Card/Card.tsx | 6 +-- src/components/Chip/Chip.tsx | 4 +- src/components/CrossFadeIcon.tsx | 6 +-- src/components/Drawer/DrawerCollapsedItem.tsx | 6 +-- src/components/FAB/Extended.tsx | 2 +- src/components/FAB/FAB.tsx | 2 +- src/components/FAB/Menu.tsx | 4 +- src/components/FAB/Shell.tsx | 4 +- src/components/IconButton/IconButton.tsx | 11 +++-- src/components/Menu/Menu.tsx | 6 +-- src/components/Menu/MenuItem.tsx | 4 +- src/components/Modal.tsx | 8 ++-- src/components/ProgressBar.tsx | 4 +- src/components/Searchbar.tsx | 16 +++---- .../__tests__/Appbar/Appbar.test.tsx | 19 ++++---- .../Appbar/__snapshots__/Appbar.test.tsx.snap | 15 ------- .../__tests__/BottomNavigation.test.tsx | 15 ++++--- src/components/__tests__/Card/Card.test.tsx | 6 +-- .../Card/__snapshots__/Card.test.tsx.snap | 3 -- .../Drawer/DrawerCollapsedItem.test.tsx | 18 ++++++-- src/components/__tests__/FABMenu.test.tsx | 5 +-- src/components/__tests__/ListItem.test.tsx | 4 +- src/components/__tests__/MenuItem.test.tsx | 1 + .../__snapshots__/Banner.test.tsx.snap | 12 ----- .../BottomNavigation.test.tsx.snap | 44 ------------------- .../__snapshots__/Button.test.tsx.snap | 38 ---------------- .../__snapshots__/Chip.test.tsx.snap | 12 ----- .../__snapshots__/DataTable.test.tsx.snap | 28 ------------ .../__tests__/__snapshots__/FAB.test.tsx.snap | 26 ----------- .../__snapshots__/FABExtended.test.tsx.snap | 18 -------- .../__snapshots__/FABMenu.test.tsx.snap | 21 --------- .../__snapshots__/IconButton.test.tsx.snap | 11 ----- .../__snapshots__/ListItem.test.tsx.snap | 2 - .../__snapshots__/Menu.test.tsx.snap | 12 ----- .../__snapshots__/MenuItem.test.tsx.snap | 10 ----- .../__snapshots__/ProgressBar.test.tsx.snap | 8 ---- .../__snapshots__/Searchbar.test.tsx.snap | 18 -------- .../__snapshots__/Snackbar.test.tsx.snap | 3 -- .../__snapshots__/TextInput.test.tsx.snap | 16 ------- .../__snapshots__/ToggleButton.test.tsx.snap | 6 --- 45 files changed, 102 insertions(+), 379 deletions(-) diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx index 5270aa271d..fd3c952d9d 100644 --- 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 index 1c486f9ccd..7eeae99765 100644 --- 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 index 7b0cd12111..da2b38c5b0 100644 --- a/src/components/BottomNavigation/BottomNavigation.tsx +++ b/src/components/BottomNavigation/BottomNavigation.tsx @@ -335,7 +335,7 @@ const BottomNavigation = ({ safeAreaInsets, labelMaxFontSizeMultiplier = 1, compact: compactProp, - testID = 'bottom-navigation', + testID, theme: themeOverrides, getLazy = ({ route }: { route: Route }) => route.lazy, }: Props) => { @@ -579,7 +579,7 @@ const BottomNavigation = ({ safeAreaInsets={safeAreaInsets} labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier} compact={compact} - testID={`${testID}-bar`} + testID={testID ? `${testID}-bar` : undefined} theme={theme} /> diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index b5cd6da15a..f0375a6bf5 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -323,7 +323,7 @@ const BottomNavigationBar = ({ safeAreaInsets, labelMaxFontSizeMultiplier = 1, compact: compactProp, - testID = 'bottom-navigation-bar', + testID, theme: themeOverrides, }: Props) => { const theme = useInternalTheme(themeOverrides); @@ -495,7 +495,7 @@ const BottomNavigationBar = ({ > ({ }, ]} 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 index 00f0242f0f..cc96917b16 100644 --- 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 = ({ {icon && loading !== true ? ( - + {isMode('outlined') && ( { const theme = useInternalTheme(themeOverrides); @@ -109,14 +109,14 @@ const CrossFadeIcon = ({ {hasPreviousIcon ? ( ) : null} diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx index 52decb7c23..da5a881783 100644 --- 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} /> {badge !== false && ( diff --git a/src/components/FAB/Extended.tsx b/src/components/FAB/Extended.tsx index ff3c500545..4aeeb867cb 100644 --- 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 index fac6460c6a..877fa232ed 100644 --- 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 index 58a75291cf..9cc7959b90 100644 --- 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} > { const theme = useInternalTheme(themeOverrides); diff --git a/src/components/FAB/Shell.tsx b/src/components/FAB/Shell.tsx index b9f6279194..6f563c96ef 100644 --- 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} > diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 52cb5fa3b2..218695c5fe 100644 --- 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 ( ) : ( - + )} diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 63fb0faf1f..2138b9be82 100644 --- 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} > diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 22a3f7ba8e..aa5703aed4 100644 --- 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} /> { const isWeb = Platform.OS === 'web'; @@ -213,7 +213,7 @@ const ProgressBar = ({ > {width ? ( & { right?: (props: { color: ColorValue; style: Style; - testID: string; + testID?: string; }) => React.ReactNode; /** * @supported Available in v5.x with theme version 3 @@ -183,7 +183,7 @@ const Searchbar = ({ theme: themeOverrides, value, loading = false, - testID = 'search-bar', + testID, ref, ...rest }: Props) => { @@ -235,7 +235,7 @@ const Searchbar = ({ backgroundColor={theme.colors.surfaceContainerHigh} borderRadius={isBarMode ? theme.shapes.corner.extraLarge : cornerNone} style={[styles.container, style]} - testID={`${testID}-container`} + testID={testID ? `${testID}-container` : undefined} elevation={elevation} theme={theme} > @@ -257,7 +257,7 @@ const Searchbar = ({ } theme={theme} aria-label={searchAccessibilityLabel} - testID={`${testID}-icon`} + testID={testID ? `${testID}-icon` : undefined} /> )) } - testID={`${testID}-clear-icon`} + testID={testID ? `${testID}-clear-icon` : undefined} role="button" theme={theme} /> @@ -331,7 +331,7 @@ const Searchbar = ({ iconColor={traileringIconColor || colors.onSurfaceVariant} icon={traileringIcon} aria-label={traileringIconAccessibilityLabel} - testID={`${testID}-trailering-icon`} + testID={testID ? `${testID}-trailering-icon` : undefined} /> ) : null} {isBarMode && @@ -345,7 +345,7 @@ const Searchbar = ({ backgroundColor: colors.outline, }, ]} - testID={`${testID}-divider`} + testID={testID ? `${testID}-divider` : undefined} /> )} diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx index 5bba9563f4..396ffd6734 100644 --- a/src/components/__tests__/Appbar/Appbar.test.tsx +++ b/src/components/__tests__/Appbar/Appbar.test.tsx @@ -196,8 +196,8 @@ describe('AppbarAction', () => { ); // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const appbarActionIcon = screen.getByTestId('cross-fade-icon-current').props - .children; + const appbarActionIcon = screen.getByTestId('appbar-action-icon-current') + .props.children; // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. expect(appbarActionIcon.props.color).toBe( getTheme().colors.onSurfaceVariant @@ -211,8 +211,8 @@ describe('AppbarAction', () => { ); // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const appbarActionIcon = screen.getByTestId('cross-fade-icon-current').props - .children; + const appbarActionIcon = screen.getByTestId('appbar-action-icon-current') + .props.children; // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. expect(appbarActionIcon.props.color).toBe(getTheme().colors.onSurface); }); @@ -224,8 +224,8 @@ describe('AppbarAction', () => { ); // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const appbarActionIcon = screen.getByTestId('cross-fade-icon-current').props - .children; + const appbarActionIcon = screen.getByTestId('appbar-action-icon-current') + .props.children; // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. expect(appbarActionIcon.props.color).toBe('purple'); }); @@ -237,8 +237,9 @@ describe('AppbarAction', () => { ); // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const appbarBackActionIcon = screen.getByTestId('cross-fade-icon-current') - .props.children; + const appbarBackActionIcon = screen.getByTestId( + 'appbar-action-icon-current' + ).props.children; // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. expect(appbarBackActionIcon.props.color).toBe('purple'); }); @@ -249,7 +250,7 @@ describe('AppbarContent', () => { it(`should render text component with appropriate variant for ${mode} mode`, async () => { await render( - + ); diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 882652f92d..ad5805e1e6 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -140,7 +140,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` }, ] } - testID="search-bar-container" > @@ -357,7 +353,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` false, ] } - testID="search-bar-icon-wrapper" > Examples @@ -832,7 +820,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A undefined, ] } - testID="icon-button-container" > { const onIndexChange = jest.fn(); await render( { await render( { await render( { it('renders custom background color passed to barStyle property', async () => { await render( ); @@ -498,11 +501,11 @@ it('uses the rendered bar height when hiding it for the keyboard', async () => { it('renders a single tab', async () => { await render( ); @@ -527,12 +530,12 @@ it('renders bottom navigation with getLazy', async () => { it('applies maxTabBarWidth styling if compact prop is truthy', async () => { await render( route.key === 'key-2'} shifting={false} - testID="bottom-navigation" compact /> ); @@ -547,12 +550,12 @@ it('applies maxTabBarWidth styling if compact prop is truthy', async () => { it('does not apply maxTabBarWidth styling if compact prop is falsy', async () => { await render( route.key === 'key-2'} shifting={false} - testID="bottom-navigation" compact={false} /> ); @@ -567,11 +570,11 @@ it('does not apply maxTabBarWidth styling if compact prop is falsy', async () => it('renders bar content when shifting is enabled', async () => { await render( route.key === 'key-2'} - testID="bottom-navigation" shifting /> ); @@ -582,11 +585,11 @@ it('renders bar content when shifting is enabled', async () => { it('does not render legacy ripple overlay when shifting is disabled', async () => { await render( route.key === 'key-2'} - testID="bottom-navigation" shifting={false} /> ); diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx index 74637a8a53..16163ba257 100644 --- a/src/components/__tests__/Card/Card.test.tsx +++ b/src/components/__tests__/Card/Card.test.tsx @@ -92,7 +92,7 @@ describe('Card', () => { it('renders with a content style', async () => { await render( - + Content ); @@ -101,13 +101,13 @@ describe('Card', () => { }); it('does not render a disabled accessibility state', async () => { - await render({null}); + await render({null}); expect(screen.getByTestId('card')).toBeEnabled(); }); it('does render a disabled accessibility state', async () => { await render( - {}} disabled> + {}} disabled> {null} ); diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap index 5c39f6bf05..0554292cee 100644 --- a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap +++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap @@ -41,7 +41,6 @@ exports[`Card renders an outlined card 1`] = ` }, ] } - testID="card-container" > `; diff --git a/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx b/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx index 3df20be862..fd0263b5e2 100644 --- a/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx +++ b/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx @@ -7,6 +7,7 @@ describe('DrawerCollapsedItem', () => { it('should have regular outline if label is specified', async () => { await render( { it('should have rounded outline if label is not specified', async () => { await render( - + ); expect(screen.getByTestId('drawer-collapsed-item-outline')).toHaveStyle({ @@ -30,7 +35,11 @@ describe('DrawerCollapsedItem', () => { it('should display unfocused icon in inactive state, if unfocused icon is specified', async () => { await render( - + ); expect( @@ -41,7 +50,9 @@ describe('DrawerCollapsedItem', () => { }); it('should display focused icon in inactive state, if unfocused icon is not specified', async () => { - await render(); + await render( + + ); expect( // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. @@ -53,6 +64,7 @@ describe('DrawerCollapsedItem', () => { it('should display focused icon in active state', async () => { await render( { ); - // Shell's TouchableRipple uses the default testID 'fab-shell' await userEvent.press(screen.getByTestId('fab-shell')); expect(onTriggerPress).toHaveBeenCalledTimes(1); }); @@ -186,7 +185,7 @@ it('calls onDismiss when trigger is pressed while menu is open', async () => { ); diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index b50f4e7d3f..e0e1cb5303 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -155,7 +155,9 @@ it('calling onPress on ListItem right component', async () => { title="First Item" description="Item description" testID={testID} - right={() => } + right={() => ( + + )} /> ); diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index ba66e705a7..4662ce968e 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -40,6 +40,7 @@ describe('Menu Item', () => { await render( {}} diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index 94a5339bab..71e77e2936 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -228,7 +228,6 @@ exports[`render visible banner, with custom theme 1`] = ` }, ] } - testID="button-container" > first @@ -840,7 +837,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` }, ] } - testID="button-container" > first @@ -1234,7 +1228,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` }, ] } - testID="button-container" > first @@ -1444,7 +1435,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` }, ] } - testID="button-container" > second diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap index 82f7a0cc74..7ffd6c9752 100644 --- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap @@ -11,7 +11,6 @@ exports[`allows customizing Route's type via generics 1`] = ` undefined, ] } - testID="bottom-navigation" > Button with accessibility hint @@ -256,7 +253,6 @@ exports[`renders button with an accessibility label 1`] = ` }, ] } - testID="button-container" > Button with accessibility label @@ -463,7 +457,6 @@ exports[`renders button with button color 1`] = ` }, ] } - testID="button-container" > Custom Button @@ -670,7 +661,6 @@ exports[`renders button with color 1`] = ` }, ] } - testID="button-container" > Custom Button @@ -1084,7 +1072,6 @@ exports[`renders button with icon 1`] = ` }, ] } - testID="button-container" > Icon Button @@ -1340,7 +1324,6 @@ exports[`renders button with icon in reverse order 1`] = ` }, ] } - testID="button-container" > Right Icon @@ -1598,7 +1578,6 @@ exports[`renders contained contained with mode 1`] = ` }, ] } - testID="button-container" > Contained Button @@ -1806,7 +1783,6 @@ exports[`renders disabled button 1`] = ` }, ] } - testID="button-container" > Disabled Button @@ -2013,7 +1987,6 @@ exports[`renders loading button 1`] = ` }, ] } - testID="button-container" > Loading Button @@ -2424,7 +2395,6 @@ exports[`renders outlined button with mode 1`] = ` }, ] } - testID="button-container" > Outlined Button @@ -2632,7 +2600,6 @@ exports[`renders text button by default 1`] = ` }, ] } - testID="button-container" > Text Button @@ -2839,7 +2804,6 @@ exports[`renders text button with mode 1`] = ` }, ] } - testID="button-container" > Text Button diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap index 04359a41f9..04687e301f 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap @@ -49,7 +49,6 @@ exports[`renders chip with close button 1`] = ` }, ] } - testID="chip-container" > 2 @@ -1838,7 +1818,6 @@ exports[`DataTable.Pagination renders data table pagination with options select undefined, ] } - testID="icon-button-container" > New message @@ -384,7 +381,6 @@ exports[`renders extended FAB expanded 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message @@ -713,7 +707,6 @@ exports[`renders extended FAB large size 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message @@ -1042,7 +1033,6 @@ exports[`renders extended FAB medium size 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message @@ -1371,7 +1359,6 @@ exports[`renders extended FAB not visible 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message @@ -1700,7 +1685,6 @@ exports[`renders extended FAB transitioning to collapsed 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message diff --git a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap index 059c17b9f4..23b577a775 100644 --- a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap @@ -21,7 +21,6 @@ exports[`renders FAB.Menu closed 1`] = ` }, ] } - testID="floating-action-button-menu" > Open menu @@ -282,7 +279,6 @@ exports[`renders visible menu 1`] = ` }, ] } - testID="button-container" > Open menu @@ -517,7 +511,6 @@ exports[`renders visible menu 1`] = ` undefined, ] } - testID="menu-view" > Undo @@ -825,7 +815,6 @@ exports[`renders visible menu 1`] = ` ], ] } - testID="menu-item" > Redo diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index 6977abf932..c316a38599 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -51,7 +51,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item" > Redo @@ -215,7 +213,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item" > Undo @@ -379,7 +375,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item" > Cut @@ -543,7 +537,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item" > Copy @@ -707,7 +699,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item" > Paste diff --git a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap index 22fa984fd8..b7fea2ca34 100644 --- a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -10,7 +10,6 @@ exports[`renders colored progress bar 1`] = ` onLayout={[Function]} role="progressbar" style={false} - testID="progress-bar" > @@ -56,7 +54,6 @@ exports[`renders hidden progress bar 1`] = ` onLayout={[Function]} role="progressbar" style={false} - testID="progress-bar" > @@ -99,7 +95,6 @@ exports[`renders indeterminate progress bar 1`] = ` onLayout={[Function]} role="progressbar" style={false} - testID="progress-bar" > @@ -145,7 +139,6 @@ exports[`renders progress bar with specific progress 1`] = ` onLayout={[Function]} role="progressbar" style={false} - testID="progress-bar" > diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap index c324b1874c..27436d6599 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap @@ -42,7 +42,6 @@ exports[`activity indicator snapshot test 1`] = ` }, ] } - testID="search-bar-container" > @@ -486,7 +482,6 @@ exports[`renders with placeholder 1`] = ` }, ] } - testID="search-bar-container" > @@ -703,7 +695,6 @@ exports[`renders with placeholder 1`] = ` false, ] } - testID="search-bar-icon-wrapper" > @@ -1084,7 +1069,6 @@ exports[`renders with text 1`] = ` false, ] } - testID="search-bar-icon-wrapper" > Undo diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index 9a4edcd5c1..6efc467066 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -176,7 +176,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = ` false, ] } - testID="icon-button-container" > Date: Fri, 4 Sep 2026 14:31:09 +0200 Subject: [PATCH 2/2] fix: guard derived testIDs and document impact in migration guide --- docs/6.x/docs/guides/migration.md | 61 +++++++++++++++++-- src/components/Checkbox/CheckboxItem.tsx | 2 +- src/components/DataTable/DataTableCell.tsx | 2 +- src/components/List/ListItem.tsx | 2 +- .../SegmentedButtons/SegmentedButtonItem.tsx | 6 +- src/components/Snackbar.tsx | 2 +- .../__snapshots__/CheckboxItem.test.tsx.snap | 2 - .../__snapshots__/DataTable.test.tsx.snap | 2 - .../__snapshots__/ListAccordion.test.tsx.snap | 1 - .../SegmentedButton.test.tsx.snap | 2 - 10 files changed, 62 insertions(+), 20 deletions(-) diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md index a4d7123a09..a401ad8de8 100644 --- a/docs/6.x/docs/guides/migration.md +++ b/docs/6.x/docs/guides/migration.md @@ -71,12 +71,61 @@ You can use the component's color prop where available, or override the correspo ### Test IDs -Some hardcoded and generated test IDs have been removed for the following components: - -- `Appbar.Header`: `${testID}-root-layer` -- `Surface`: `surface` and `${testID}-outer-layer` - -You can specify a `testID` explicitly and use that value to query the component. +Hardcoded default test IDs have been removed for the components listed below. Many of these components also derive test IDs for their internal parts by appending a suffix to the `testID` prop (e.g. `${testID}-container`). Since `testID` is no longer defaulted to a hardcoded value, none of these derived test IDs are set either unless you pass a `testID` explicitly — so all queries by the IDs below will stop matching: + +- `Appbar.Content`: `appbar-content` + - `appbar-content-title-text` +- `Appbar.Header`: `appbar-header` + - `appbar-header-root-layer` +- `BottomNavigation`: `bottom-navigation` + - `bottom-navigation-bar` +- `BottomNavigation.Bar`: `bottom-navigation-bar` + - `bottom-navigation-bar-content` + - `bottom-navigation-bar-content-wrapper` +- `Button`: `button` + - `button-container` + - `button-icon-container` + - `button-text` +- `Card`: `card` + - `card-container` + - `card-outline` +- `Chip`: `chip` + - `chip-container` +- `Drawer.CollapsedItem`: `drawer-collapsed-item` + - `drawer-collapsed-item-outline` + - `drawer-collapsed-item-container` +- `FAB`: `floating-action-button` + - `floating-action-button-container` + - `floating-action-button-text` +- `FAB.Extended`: `extended-floating-action-button` + - `extended-floating-action-button-container` + - `extended-floating-action-button-text` +- `FAB.Menu`: `floating-action-button-menu` +- `IconButton`: `icon-button` + - `icon-button-container` + - `icon-button-icon` (and `icon-button-icon-previous` / `icon-button-icon-current` when `animated`) +- `Menu`: `menu` + - `menu-view` + - `menu-surface` +- `Menu.Item`: `menu-item` + - `menu-item-title` +- `Modal`: `modal` + - `modal-backdrop` + - `modal-wrapper` + - `modal-surface` +- `ProgressBar`: `progress-bar` + - `progress-bar-fill` +- `Searchbar`: `search-bar` + - `search-bar-container` + - `search-bar-icon` + - `search-bar-icon-wrapper` + - `search-bar-clear-icon` + - `search-bar-trailering-icon` + - `search-bar-divider` +- `Surface`: `surface` + - `surface-outer-layer` + +You can specify a `testID` explicitly to restore both the component's own test ID and all of its derived test IDs above, using the same suffixes. ## Components diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index fae1a44c85..451e60e202 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -174,7 +174,7 @@ const CheckboxItem = ({ {isLeading && checkbox} diff --git a/src/components/DataTable/DataTableCell.tsx b/src/components/DataTable/DataTableCell.tsx index ce59206af6..4d6a3e0086 100644 --- a/src/components/DataTable/DataTableCell.tsx +++ b/src/components/DataTable/DataTableCell.tsx @@ -108,7 +108,7 @@ const CellContent = ({ style={textStyle} numberOfLines={1} maxFontSizeMultiplier={maxFontSizeMultiplier} - testID={`${testID}-text-container`} + testID={testID ? `${testID}-text-container` : undefined} > {children} diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index a6f0181f02..35d0469e3b 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -242,7 +242,7 @@ const ListItem = ({ : null} {renderTitle()} diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx index 15e34dd170..2e2d540217 100644 --- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx +++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx @@ -224,7 +224,7 @@ const SegmentedButtonItem = ({ > {showCheckedIcon ? ( @@ -232,7 +232,7 @@ const SegmentedButtonItem = ({ ) : null} {showIcon ? ( @@ -244,7 +244,7 @@ const SegmentedButtonItem = ({ selectable={false} numberOfLines={1} maxFontSizeMultiplier={labelMaxFontSizeMultiplier} - testID={`${testID}-label`} + testID={testID ? `${testID}-label` : undefined} > {label} diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx index 297825c130..ce3fe96dfa 100644 --- a/src/components/Snackbar.tsx +++ b/src/components/Snackbar.tsx @@ -338,7 +338,7 @@ const Snackbar = ({ } aria-label={iconAccessibilityLabel} style={styles.icon} - testID={`${testID}-icon`} + testID={testID ? `${testID}-icon` : undefined} /> ) : null} diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index 9617ebefbd..bc5b884910 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -269,7 +269,6 @@ exports[`can render leading checkbox control 1`] = ` ], ] } - testID="undefined-text" > Default with leading control @@ -367,7 +366,6 @@ exports[`renders unchecked 1`] = ` ], ] } - testID="undefined-text" > Unchecked Button diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap index 43a63b3fd0..c41b1b39de 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -65,7 +65,6 @@ exports[`DataTable.Cell renders data table cell 1`] = ` undefined, ] } - testID="undefined-text-container" > Cupcake @@ -139,7 +138,6 @@ exports[`DataTable.Cell renders right aligned data table cell 1`] = ` undefined, ] } - testID="undefined-text-container" > 356 diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index 66fa6d11e8..c01fcf856a 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -226,7 +226,6 @@ exports[`renders expanded accordion 1`] = ` undefined, ] } - testID="undefined-content" > @@ -260,7 +259,6 @@ exports[`renders segmented button 1`] = ` ], ] } - testID="undefined-label" />