SlotFill: add unit test for useSlotFills loop

packages/components/src/slot-fill/test/__snapshots__/slot.js.snap

@@ -86,6 +86,20 @@ exports[`Slot bubblesVirtually true should unmount two slots with the same name
 </div>
 `;
 
+exports[`Slot should not infinite loop with useSlotFills 1`] = `
+<div>
+  <div>
+    <div>
+      fills:
+      1
+    </div>
+    <div>
+      fill content
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Slot should re-render Slot when not bubbling virtually 1`] = `
 <div>
   <div>

packages/components/src/slot-fill/test/slot.js

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import { Slot, Fill, Provider } from '../';
+import { Slot, Fill, Provider, useSlotFills } from '../';
 
 /**
  * WordPress dependencies
@@ -381,4 +381,27 @@ describe( 'Slot', () => {
 			} );
 		}
 	);
+
+	it( 'should not infinite loop with useSlotFills', () => {
+		function App() {
+			// if `useSlotFills` triggers a state update every time the `Fill` is rerendered with
+			// new `children`, it will cause infinite rerender loop. This test checks we don't do that.
+			const fills = useSlotFills( 'editor' );
+			return (
+				<div>
+					<div>fills:{ fills?.length ?? 'none' }</div>
+					<Slot name="editor" />
+					<Fill name="editor">
+						<div>fill content</div>
+					</Fill>
+				</div>
+			);
+		}
+		const { container } = render(
+			<Provider>
+				<App />
+			</Provider>
+		);
+		expect( container ).toMatchSnapshot();
+	} );
 } );