feat: add test for improvement of collections in React transitions (#8209)

* feat: add tests for #8204

* chore: review comments

* chore: revert to main branch

* fix: react 16,17 compat

Author: nwidynski

packages/react-aria-components/stories/Table.stories.tsx

@@ -21,7 +21,7 @@ import {useAsyncList, useListData} from 'react-stately';
 
 export default {
   title: 'React Aria Components',
-  excludeStories: ['DndTable']
+  excludeStories: ['DndTable', 'makePromise']
 };
 
 const ReorderableTable = ({initialItems}: {initialItems: {id: string, name: string}[]}) => {
@@ -1010,7 +1010,7 @@ const items: Launch[] = [
   {id: 3, mission_name: 'RatSat', launch_year: 2009}
 ];
 
-function makePromise(items: Launch[]) {
+export function makePromise(items: Launch[]) {
   return new Promise(resolve => setTimeout(() => resolve(items), 1000));
 }
 

packages/react-aria-components/test/Table.test.js

@@ -28,6 +28,25 @@ let {
   TableWithSuspense
 } = composeStories(stories);
 
+const mockCollectionUpdate = jest.fn();
+
+jest.mock('react', () => {
+  const actual = jest.requireActual('react');
+
+  const useSyncExternalStore = (subscribe, ...args) => {
+    const fn = actual.useCallback((onStoreChange) => {
+      subscribe(() => {
+        mockCollectionUpdate();
+        onStoreChange();
+      });
+    }, [subscribe]);
+
+    return actual.useSyncExternalStore(fn, ...args);
+  };
+
+  return actual.use ? {...actual, useSyncExternalStore} : actual;
+});
+
 function MyColumn(props) {
   return (
     <Column {...props}>
@@ -211,6 +230,7 @@ describe('Table', () => {
 
   beforeEach(() => {
     jest.useFakeTimers();
+    mockCollectionUpdate.mockClear();
   });
 
   afterEach(() => {
@@ -2274,6 +2294,8 @@ describe('Table', () => {
 
       let promise = act(() => button.click());
 
+      expect(button).toHaveTextContent('Loading');
+
       rows = tree.getAllByRole('row');
       expect(rows).toHaveLength(3);
       expect(rows[1]).toHaveTextContent('FalconSat');
@@ -2293,6 +2315,26 @@ describe('Table', () => {
       expect(rows[3]).toHaveTextContent('Trailblazer');
       expect(rows[4]).toHaveTextContent('RatSat');
     });
+
+    it('should not render excessively in React Suspense with transitions', async () => {
+      // Only supported in React 19.
+      if (!React.use) {
+        return;
+      }
+
+      jest.useRealTimers();
+
+      let tree = await act(() => render(<TableWithSuspense reactTransition />));
+
+      await act(() => stories.makePromise([]));
+
+      expect(mockCollectionUpdate).toHaveBeenCalledTimes(1);
+
+      let button = tree.getByRole('button');
+      await act(() => button.click());
+
+      expect(mockCollectionUpdate).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe('shouldSelectOnPressUp', () => {