Update test to use toMatchStyleDiffSnapshot

WordPress · Mar 23, 2022 · f7be417 · f7be417
1 parent fe79ab8
commit f7be417
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap
@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Text should render align 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -3,7 +3,8 @@
+      "color": "#1e1e1e",
+      "font-size": "calc((13 / 13) * 13px)",
+      "font-weight": "normal",
+      "line-height": "1.2",
+      "margin": "0",
++     "text-align": "center",
+    },
+  ]
+`;
+
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
   color: #1e1e1e;

diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx
@@ -63,10 +63,16 @@ describe( 'Text', () => {
 	} );
 
 	test( 'should render align', () => {
-		const { container } = render(
+		const { container: centerAlignedContainer } = render(
 			<Text align="center">Lorem ipsum.</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( { textAlign: 'center' } );
+		const { container: defaultAlignedContainer } = render(
+			<Text>Lorem ipsum.</Text>
+		);
+
+		expect(
+			defaultAlignedContainer.children[ 0 ]
+		).toMatchStyleDiffSnapshot( centerAlignedContainer.children[ 0 ] );
 	} );
 
 	test( 'should render color', () => {