diff --git a/packages/components/src/grid/test/grid.tsx b/packages/components/src/grid/test/grid.tsx
index 9cd7bd1936439..150dac578c80a 100644
--- a/packages/components/src/grid/test/grid.tsx
+++ b/packages/components/src/grid/test/grid.tsx
@@ -13,13 +13,13 @@ import CONFIG from '../../utils/config-values';
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		render(
-			<Grid role="grid">
+			<Grid data-testid="grid">
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 2, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 3 )`,
@@ -28,14 +28,14 @@ describe( 'props', () => {
 
 	test( 'should render gap', () => {
 		render(
-			<Grid columns={ 3 } gap={ 4 } role="grid">
+			<Grid columns={ 3 } gap={ 4 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 4 )`,
@@ -44,14 +44,14 @@ describe( 'props', () => {
 
 	test( 'should render custom columns', () => {
 		render(
-			<Grid columns={ 7 } role="grid">
+			<Grid columns={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 7, 1fr )',
 		} );
@@ -59,14 +59,14 @@ describe( 'props', () => {
 
 	test( 'should render custom rows', () => {
 		render(
-			<Grid rows={ 7 } role="grid">
+			<Grid rows={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: 'repeat( 7, 1fr )',
 		} );
@@ -74,14 +74,14 @@ describe( 'props', () => {
 
 	test( 'should render align', () => {
 		render(
-			<Grid align="flex-start" role="grid">
+			<Grid align="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			alignItems: 'flex-start',
 			display: 'grid',
 		} );
@@ -89,14 +89,14 @@ describe( 'props', () => {
 
 	test( 'should render alignment spaced', () => {
 		render(
-			<Grid alignment="spaced" role="grid">
+			<Grid alignment="spaced" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			alignItems: 'center',
 			justifyContent: 'space-between',
@@ -105,14 +105,14 @@ describe( 'props', () => {
 
 	test( 'should render justify', () => {
 		render(
-			<Grid justify="flex-start" role="grid">
+			<Grid justify="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			justifyContent: 'flex-start',
 		} );
@@ -120,14 +120,14 @@ describe( 'props', () => {
 
 	test( 'should render isInline', () => {
 		render(
-			<Grid columns={ 3 } isInline role="grid">
+			<Grid columns={ 3 } isInline data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'inline-grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 		} );
@@ -135,14 +135,14 @@ describe( 'props', () => {
 
 	test( 'should render custom templateColumns', () => {
 		render(
-			<Grid templateColumns="1fr auto 1fr" role="grid">
+			<Grid templateColumns="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: '1fr auto 1fr',
 		} );
@@ -150,14 +150,14 @@ describe( 'props', () => {
 
 	test( 'should render custom templateRows', () => {
 		render(
-			<Grid templateRows="1fr auto 1fr" role="grid">
+			<Grid templateRows="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( screen.getByRole( 'grid' ) ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: '1fr auto 1fr',
 		} );