Components: Remove unnecessary .firstChild from tests

docs/contributors/code/testing-overview.md

@@ -367,13 +367,13 @@ describe( 'SolarSystem', () => {
 	test( 'should render', () => {
 		const { container } = render( <SolarSystem /> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should contain mars if planets is true', () => {
 		const { container } = render( <SolarSystem planets /> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 		expect( screen.getByText( /mars/i ) ).toBeInTheDocument();
 	} );
 } );
@@ -422,7 +422,7 @@ test( 'should contain mars if planets is true', () => {
 	const { container } = render( <SolarSystem planets /> );
 
 	// Snapshot will catch unintended changes
-	expect( container.firstChild ).toMatchSnapshot();
+	expect( container ).toMatchSnapshot();
 
 	// This is what we actually expect to find in our test
 	expect( screen.getByText( /mars/i ) ).toBeInTheDocument();
@@ -447,8 +447,8 @@ Similarly, the `toMatchStyleDiffSnapshot` function allows to snapshot only the d
 test( 'should render margin', () => {
 	const { container: spacer } = render( <Spacer /> );
 	const { container: spacerWithMargin } = render( <Spacer margin={ 5 } /> );
-	expect( spacerWithMargin.firstChild ).toMatchStyleDiffSnapshot(
-		spacer.firstChild
+	expect( spacerWithMargin ).toMatchStyleDiffSnapshot(
+		spacer
 	);
 } );
 ```

packages/components/src/card/test/__snapshots__/index.tsx.snap

@@ -90,27 +90,27 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -5,18 +5,18 @@
-  >
-    <div
-      class="css-mgwsf4-View-Content e19lxcc00"
+@@ -6,18 +6,18 @@
     >
       <div
--       class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+       class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="CardHeader"
-      >
-        Header
-      </div>
-      <div
--       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="CardBody"
+        class="css-mgwsf4-View-Content e19lxcc00"
       >
-        Code is Poetry
-      </div>
+        <div
+-         class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++         class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="CardHeader"
+        >
+          Header
+        </div>
+        <div
+-         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="CardBody"
+        >
+          Code is Poetry
+        </div>
 `;
 
 exports[`Card Card component should add rounded border when the isRounded prop is true 1`] = `
@@ -768,24 +768,25 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,16 +8,16 @@
-    >
-      Code is Poetry
+@@ -9,17 +9,17 @@
+      >
+        Code is Poetry
+      </div>
+      <div
+        aria-hidden="true"
+-       class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
+      <div
+        aria-hidden="true"
+-       class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
     </div>
-    <div
-      aria-hidden="true"
--     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Elevation"
-    />
-    <div
-      aria-hidden="true"
--     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Elevation"
-    />
   </div>
 `;
 

packages/components/src/card/test/index.tsx

@@ -70,9 +70,7 @@ describe( 'Card', () => {
 				<Card>Code is Poetry</Card>
 			);
 
-			expect( withElevation.firstChild ).toMatchDiffSnapshot(
-				withoutElevation.firstChild
-			);
+			expect( withElevation ).toMatchDiffSnapshot( withoutElevation );
 		} );
 
 		it( 'should add different amounts of white space when using the size prop', () => {
@@ -90,9 +88,7 @@ describe( 'Card', () => {
 				</Card>
 			);
 
-			expect( withSizeDefault.firstChild ).toMatchDiffSnapshot(
-				withSizeLarge.firstChild
-			);
+			expect( withSizeDefault ).toMatchDiffSnapshot( withSizeLarge );
 		} );
 
 		it( 'should warn when the isElevated prop is passed', () => {

packages/components/src/item-group/test/__snapshots__/index.js.snap

@@ -5,52 +5,52 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -7,11 +7,11 @@
-    <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
-    >
+@@ -8,11 +8,11 @@
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code
-      </div>
-@@ -19,11 +19,11 @@
-    <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
-    >
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code
+        </div>
+@@ -20,11 +20,11 @@
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Is
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Is
+        </div>
 `;
 
 exports[`ItemGroup Item should use different amounts of padding depending on the value of the size prop 1`] = `
 Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,11 +1,11 @@
-  <div
-    class="css-dcjs67-itemWrapper"
-    role="listitem"
-  >
+@@ -2,11 +2,11 @@
     <div
--     class="components-item css-bsdqin-View-medium-item e19lxcc00"
-+     class="components-item css-1ohjtsa-View-large-item e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Item"
+      class="css-dcjs67-itemWrapper"
+      role="listitem"
     >
-      Code is poetry
-    </div>
+      <div
+-       class="components-item css-bsdqin-View-medium-item e19lxcc00"
++       class="components-item css-1ohjtsa-View-large-item e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Item"
+      >
+        Code is poetry
+      </div>
 `;
 
 exports[`ItemGroup ItemGroup component should render correctly 1`] = `
@@ -110,67 +110,70 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,17 +1,17 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,18 +1,18 @@
+  <div>
     <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code is poetry
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code is poetry
+        </div>
 `;
 
 exports[`ItemGroup ItemGroup component should show borders when the isBordered prop is true 1`] = `
 Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,17 +1,17 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,18 +1,18 @@
+  <div>
     <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code is poetry
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code is poetry
+        </div>
 `;
 
 exports[`ItemGroup ItemGroup component should show rounded corners when the isRounded prop is true 1`] = `
 Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,7 +1,7 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-1mm2cvy-View e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,8 +1,8 @@
+  <div>
     <div
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-1mm2cvy-View e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
+    >
+      <div
 `;

packages/components/src/item-group/test/index.js

@@ -33,9 +33,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( noBorders.firstChild ).toMatchDiffSnapshot(
-				withBorders.firstChild
-			);
+			expect( noBorders ).toMatchDiffSnapshot( withBorders );
 		} );
 
 		it( 'should show rounded corners when the isRounded prop is true', () => {
@@ -52,9 +50,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( roundCorners.firstChild ).toMatchDiffSnapshot(
-				squaredCorners.firstChild
-			);
+			expect( roundCorners ).toMatchDiffSnapshot( squaredCorners );
 		} );
 
 		it( 'should render items individually when the isSeparated prop is true', () => {
@@ -71,9 +67,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( groupedItems.firstChild ).toMatchDiffSnapshot(
-				separatedItems.firstChild
-			);
+			expect( groupedItems ).toMatchDiffSnapshot( separatedItems );
 		} );
 	} );
 
@@ -120,9 +114,7 @@ describe( 'ItemGroup', () => {
 				<Item size="large">Code is poetry</Item>
 			);
 
-			expect( mediumSize.firstChild ).toMatchDiffSnapshot(
-				largeSize.firstChild
-			);
+			expect( mediumSize ).toMatchDiffSnapshot( largeSize );
 		} );
 
 		it( 'should read the value of the size prop from context when the prop is not defined', () => {
@@ -145,9 +137,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( mediumSize.firstChild ).toMatchDiffSnapshot(
-				largeSize.firstChild
-			);
+			expect( mediumSize ).toMatchDiffSnapshot( largeSize );
 		} );
 	} );
 } );