Use toMatchDiffSnapshot

packages/components/src/unit-control/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnitControl Basic rendering should render custom className 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -1,18 +1,18 @@
+  <div>
+    <div
+-     class="components-flex components-input-control components-number-control components-unit-control components-unit-control-wrapper e1bagdl32 ep09it41 em5sgkm7 css-zruo0h-View-Flex-base-ItemsColumn-Root-Input-htmlArrowStyles-ValueInput e19lxcc00"
++     class="components-flex components-input-control components-number-control components-unit-control components-unit-control-wrapper hello e1bagdl32 ep09it41 em5sgkm7 css-zruo0h-View-Flex-base-ItemsColumn-Root-Input-htmlArrowStyles-ValueInput e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Flex"
+    >
+      <div
+        class="components-input-control__container css-1o1a8cj-Container-containerDisabledStyles-containerWidthStyles em5sgkm6"
+      >
+        <input
+          autocomplete="off"
+          class="components-input-control__input css-1hsyo1w-Input-dragStyles-fontSizeStyles-sizeStyles-customPaddings em5sgkm5"
+-         id="inspector-input-control-1"
++         id="inspector-input-control-2"
+          inputmode="numeric"
+          max="Infinity"
+          min="-Infinity"
+          step="1"
+          type="number"
+`;

packages/components/src/unit-control/test/index.tsx

@@ -111,13 +111,7 @@ describe( 'UnitControl', () => {
 				<UnitControl className="hello" />
 			);
 
-			expect(
-				withoutClassName.querySelector( '.components-unit-control' )
-			).not.toHaveClass( 'hello' );
-			expect(
-				// eslint-disable-next-line testing-library/no-container
-				withClassName.querySelector( '.components-unit-control' )
-			).toHaveClass( 'hello' );
+			expect( withoutClassName ).toMatchDiffSnapshot( withClassName );
 		} );
 
 		it( 'should not render select, if units are disabled', () => {