Avoid mocking useResizeObserver

WordPress · May 9, 2022 · 0eeaa5b · 0eeaa5b
1 parent 82b3a0c
commit 0eeaa5b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 15 deletions.
diff --git a/packages/components/src/flyout/test/__snapshots__/index.js.snap b/packages/components/src/flyout/test/__snapshots__/index.js.snap
@@ -93,6 +93,10 @@ exports[`props should render correctly 1`] = `
   <div
     class="emotion-3 emotion-2"
   >
+    <div
+      aria-hidden="true"
+      style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+    />
     <div
       class="components-card__body components-card-body emotion-5 emotion-2"
       data-wp-c16t="true"
@@ -158,25 +162,22 @@ Snapshot Diff:
     tabindex="-1"
   >
     <div
-@@ -14,11 +14,19 @@
-      data-wp-c16t="true"
-      data-wp-component="Card"
-    >
-      <div
-        class="css-mgwsf4-View-Content em57xhy0"
--     />
-+     >
+@@ -19,10 +19,17 @@
+      >
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
 +       <div
 +         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
 +         data-wp-c16t="true"
 +         data-wp-component="CardBody"
 +       >
 +         Code is Poetry
 +       </div>
-+     </div>
+      </div>
       <div
         aria-hidden="true"
         class="components-elevation css-1b4rkmt-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
-        data-wp-component="Elevation"
 `;
diff --git a/packages/components/src/placeholder/test/index.js b/packages/components/src/placeholder/test/index.js
@@ -14,6 +14,13 @@ import { useResizeObserver } from '@wordpress/compose';
  */
 import Placeholder from '../';
 
+jest.mock( '@wordpress/compose', () => {
+	return {
+		...jest.requireActual( '@wordpress/compose' ),
+		useResizeObserver: jest.fn( () => [] ),
+	};
+} );
+
 describe( 'Placeholder', () => {
 	beforeEach( () => {
 		useResizeObserver.mockReturnValue( [

diff --git a/packages/components/src/popover/test/__snapshots__/index.js.snap b/packages/components/src/popover/test/__snapshots__/index.js.snap
@@ -16,6 +16,10 @@ exports[`Popover should pass additional props to portaled element 1`] = `
       <div
         style="position: relative;"
       >
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
         Hello
       </div>
     </div>
@@ -38,6 +42,10 @@ exports[`Popover should render content 1`] = `
       <div
         style="position: relative;"
       >
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
         Hello
       </div>
     </div>

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
@@ -173,6 +173,10 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
       id="toggle-group-control-1"
       role="radiogroup"
     >
+      <div
+        aria-hidden="true"
+        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+      />
       <div
         class="emotion-8 emotion-9"
         role="presentation"
@@ -395,6 +399,10 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
       id="toggle-group-control-0"
       role="radiogroup"
     >
+      <div
+        aria-hidden="true"
+        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+      />
       <div
         class="emotion-8 emotion-9"
         data-active="false"

diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js
@@ -1,12 +1,7 @@
 jest.mock( '@wordpress/compose', () => {
-	const App = () => null;
 	return {
 		...jest.requireActual( '@wordpress/compose' ),
 		useViewportMatch: jest.fn(),
-		useResizeObserver: jest.fn( () => [
-			<App key={ 'mock-key' } />,
-			{ width: 700, height: 500 },
-		] ),
 	};
 } );