Components: Fix no-node-access in Grid tests (#45900)

* Components: Fix no-node-access in Grid tests * role -> data-testid
WordPress · Nov 21, 2022 · 5122e65 · 5122e65
1 parent ba9f76c
commit 5122e65
Showing 1 changed file with 31 additions and 31 deletions.
diff --git a/packages/components/src/grid/test/grid.tsx b/packages/components/src/grid/test/grid.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,152 +12,152 @@ import CONFIG from '../../utils/config-values';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render(
-			<Grid>
+		render(
+			<Grid data-testid="grid">
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 2, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 3 )`,
 		} );
 	} );
 
 	test( 'should render gap', () => {
-		const { container } = render(
-			<Grid columns={ 3 } gap={ 4 }>
+		render(
+			<Grid columns={ 3 } gap={ 4 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 4 )`,
 		} );
 	} );
 
 	test( 'should render custom columns', () => {
-		const { container } = render(
-			<Grid columns={ 7 }>
+		render(
+			<Grid columns={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom rows', () => {
-		const { container } = render(
-			<Grid rows={ 7 }>
+		render(
+			<Grid rows={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render align', () => {
-		const { container } = render(
-			<Grid align="flex-start">
+		render(
+			<Grid align="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			alignItems: 'flex-start',
 			display: 'grid',
 		} );
 	} );
 
 	test( 'should render alignment spaced', () => {
-		const { container } = render(
-			<Grid alignment="spaced">
+		render(
+			<Grid alignment="spaced" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			alignItems: 'center',
 			justifyContent: 'space-between',
 		} );
 	} );
 
 	test( 'should render justify', () => {
-		const { container } = render(
-			<Grid justify="flex-start">
+		render(
+			<Grid justify="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			justifyContent: 'flex-start',
 		} );
 	} );
 
 	test( 'should render isInline', () => {
-		const { container } = render(
-			<Grid columns={ 3 } isInline>
+		render(
+			<Grid columns={ 3 } isInline data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'inline-grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom templateColumns', () => {
-		const { container } = render(
-			<Grid templateColumns="1fr auto 1fr">
+		render(
+			<Grid templateColumns="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: '1fr auto 1fr',
 		} );
 	} );
 
 	test( 'should render custom templateRows', () => {
-		const { container } = render(
-			<Grid templateRows="1fr auto 1fr">
+		render(
+			<Grid templateRows="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: '1fr auto 1fr',
 		} );