fix: Support React 19 and remove Jest reliance in test utils (#7686)

* attempt to get rid of jest calls in menu util

* update RSP testing docs to directly mention mocks that maybe needed

* bump versions of RTL to 16

* use alternative to calling jest run timers in menu option selection

* fixing types and properly testing long press

* fix lint

* revert to pre testing library bump for clean slate

* fix build and another submenu edge case

now we shouldnt need to call runAllTimers after selectOption

* fix react 16 bug

* update return type of advanceTimer and docs copy

* move some general fixes from selectionMode="replace" branch here

* get rid of unneeded async

* getting rid of extraneous dep

* fix lint

Author: LFDanLu

package.json

@@ -125,7 +125,7 @@
     "@tailwindcss/postcss": "^4.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
     "@types/react": "npm:types-react@19.0.0-rc.0",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",

packages/@react-aria/test-utils/package.json

@@ -25,9 +25,10 @@
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/test-utils/src/events.ts

@@ -22,7 +22,7 @@ export const DEFAULT_LONG_PRESS_TIME = 500;
  * @param opts.advanceTimer - Function that when called advances the timers in your test suite by a specific amount of time(ms).
  * @param opts.pointeropts - Options to pass to the simulated event. Defaults to mouse. See https://testing-library.com/docs/dom-testing-library/api-events/#fireevent for more info.
  */
-export async function triggerLongPress(opts: {element: HTMLElement, advanceTimer: (time?: number) => void | Promise<unknown>, pointerOpts?: Record<string, any>}): Promise<void> {
+export async function triggerLongPress(opts: {element: HTMLElement, advanceTimer: (time: number) => unknown | Promise<unknown>, pointerOpts?: Record<string, any>}): Promise<void> {
   // TODO: note that this only works if the code from installPointerEvent is called somewhere in the test BEFORE the
   // render. Perhaps we should rely on the user setting that up since I'm not sure there is a great way to set that up here in the
   // util before first render. Will need to document it well

packages/@react-aria/test-utils/src/gridlist.ts

@@ -64,6 +64,11 @@ export class GridListTester {
     if (targetIndex === -1) {
       throw new Error('Option provided is not in the gridlist');
     }
+
+    if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) {
+      act(() => this._gridlist.focus());
+    }
+
     if (document.activeElement === this._gridlist) {
       await this.user.keyboard('[ArrowDown]');
     } else if (this._gridlist.contains(document.activeElement) && document.activeElement!.getAttribute('role') !== 'row') {
@@ -161,10 +166,6 @@ export class GridListTester {
         return;
       }
 
-      if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) {
-        act(() => this._gridlist.focus());
-      }
-
       await this.keyboardNavigateToRow({row});
       await this.user.keyboard('[Enter]');
     } else {

packages/@react-aria/test-utils/src/listbox.ts

@@ -93,10 +93,12 @@ export class ListBoxTester {
       throw new Error('Option provided is not in the listbox');
     }
 
-    if (document.activeElement === this._listbox) {
-      await this.user.keyboard('[ArrowDown]');
+    if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
+      act(() => this._listbox.focus());
     }
 
+    await this.user.keyboard('[ArrowDown]');
+
     // TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,
     // feels like it could break easily
     if (document.activeElement?.getAttribute('role') !== 'option') {
@@ -135,10 +137,6 @@ export class ListBoxTester {
         return;
       }
 
-      if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
-        act(() => this._listbox.focus());
-      }
-
       await this.keyboardNavigateToOption({option});
       await this.user.keyboard(`[${keyboardActivation}]`);
     } else {
@@ -179,10 +177,6 @@ export class ListBoxTester {
         return;
       }
 
-      if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
-        act(() => this._listbox.focus());
-      }
-
       await this.keyboardNavigateToOption({option});
       await this.user.keyboard('[Enter]');
     } else {

packages/@react-aria/test-utils/src/menu.ts

@@ -64,9 +64,10 @@ export class MenuTester {
   private _advanceTimer: UserOpts['advanceTimer'];
   private _trigger: HTMLElement | undefined;
   private _isSubmenu: boolean = false;
+  private _rootMenu: HTMLElement | undefined;
 
   constructor(opts: MenuTesterOpts) {
-    let {root, user, interactionType, advanceTimer, isSubmenu} = opts;
+    let {root, user, interactionType, advanceTimer, isSubmenu, rootMenu} = opts;
     this.user = user;
     this._interactionType = interactionType || 'mouse';
     this._advanceTimer = advanceTimer;
@@ -85,6 +86,7 @@ export class MenuTester {
     }
 
     this._isSubmenu = isSubmenu || false;
+    this._rootMenu = rootMenu;
   }
 
   /**
@@ -226,20 +228,56 @@ export class MenuTester {
           await this.user.pointer({target: option, keys: '[TouchA]'});
         }
       }
-      act(() => {jest.runAllTimers();});
 
-      if (option.getAttribute('href') == null && option.getAttribute('aria-haspopup') == null && menuSelectionMode === 'single' && closesOnSelect && keyboardActivation !== 'Space' && !this._isSubmenu) {
+      // This chain of waitFors is needed in place of running all timers since we don't know how long transitions may take, or what action
+      // the menu option select may trigger.
+      if (
+        !(menuSelectionMode === 'single' && !closesOnSelect) &&
+        !(menuSelectionMode === 'multiple' && (keyboardActivation === 'Space' || interactionType === 'mouse'))
+      ) {
+        // For RSP, clicking on a submenu option seems to briefly lose focus to the body before moving to the clicked option in the test so we need to wait
+        // for focus to be coerced to somewhere else in place of running all timers.
+        if (this._isSubmenu) {
+          await waitFor(() => {
+            if (document.activeElement === document.body) {
+              throw new Error('Expected focus to move to somewhere other than the body after selecting a submenu option.');
+            } else {
+              return true;
+            }
+          });
+        }
+
+        // If user isn't trying to select multiple menu options or closeOnSelect is true then we can assume that
+        // the menu will close or some action is triggered. In cases like that focus should move somewhere after the menu closes
+        // but we can't really know where so just make sure it doesn't get lost to the body.
         await waitFor(() => {
-          if (document.activeElement !== trigger) {
-            throw new Error(`Expected the document.activeElement after selecting an option to be the menu trigger but got ${document.activeElement}`);
+          if (document.activeElement === option) {
+            throw new Error('Expected focus after selecting an option to move away from the option.');
           } else {
             return true;
           }
         });
 
-        if (document.contains(menu)) {
-          throw new Error('Expected menu element to not be in the document after selecting an option');
+        // We'll also want to wait for focus to move away from the original submenu trigger since the entire submenu tree should
+        // close. In React 16, focus actually makes it all the way to the root menu's submenu trigger so we need check the root menu
+        if (this._isSubmenu) {
+          await waitFor(() => {
+            if (document.activeElement === this.trigger || this._rootMenu?.contains(document.activeElement)) {
+              throw new Error('Expected focus after selecting an submenu option to move away from the original submenu trigger.');
+            } else {
+              return true;
+            }
+          });
         }
+
+        // Finally wait for focus to be coerced somewhere final when the menu tree is removed from the DOM
+        await waitFor(() => {
+          if (document.activeElement === document.body) {
+            throw new Error('Expected focus to move to somewhere other than the body after selecting a menu option.');
+          } else {
+            return true;
+          }
+        });
       }
     } else {
       throw new Error("Attempted to select a option in the menu, but menu wasn't found.");
@@ -269,18 +307,30 @@ export class MenuTester {
           submenuTrigger = (within(menu!).getByText(submenuTrigger).closest('[role=menuitem]'))! as HTMLElement;
         }
 
-        let submenuTriggerTester = new MenuTester({user: this.user, interactionType: this._interactionType, root: submenuTrigger, isSubmenu: true});
+        let submenuTriggerTester = new MenuTester({
+          user: this.user,
+          interactionType: this._interactionType,
+          root: submenuTrigger,
+          isSubmenu: true,
+          advanceTimer: this._advanceTimer,
+          rootMenu: (this._isSubmenu ? this._rootMenu : this.menu) || undefined
+        });
         if (interactionType === 'mouse') {
           await this.user.pointer({target: submenuTrigger});
-          act(() => {jest.runAllTimers();});
         } else if (interactionType === 'keyboard') {
           await this.keyboardNavigateToOption({option: submenuTrigger});
           await this.user.keyboard('[ArrowRight]');
-          act(() => {jest.runAllTimers();});
         } else {
           await submenuTriggerTester.open();
         }
 
+        await waitFor(() => {
+          if (submenuTriggerTester._trigger?.getAttribute('aria-expanded') !== 'true') {
+            throw new Error('aria-expanded for the submenu trigger wasn\'t changed to "true", unable to confirm the existance of the submenu');
+          } else {
+            return true;
+          }
+        });
 
         return submenuTriggerTester;
       }

packages/@react-aria/test-utils/src/tree.ts

@@ -71,6 +71,11 @@ export class TreeTester {
     if (targetIndex === -1) {
       throw new Error('Option provided is not in the tree');
     }
+
+    if (document.activeElement !== this._tree || !this._tree.contains(document.activeElement)) {
+      act(() => this._tree.focus());
+    }
+
     if (document.activeElement === this.tree) {
       await this.user.keyboard('[ArrowDown]');
     } else if (this._tree.contains(document.activeElement) && document.activeElement!.getAttribute('role') !== 'row') {
@@ -206,10 +211,6 @@ export class TreeTester {
         return;
       }
 
-      if (document.activeElement !== this._tree || !this._tree.contains(document.activeElement)) {
-        act(() => this._tree.focus());
-      }
-
       await this.keyboardNavigateToRow({row});
       await this.user.keyboard('[Enter]');
     } else {

packages/@react-aria/test-utils/src/types.ts

@@ -22,14 +22,14 @@ export interface UserOpts {
    * @default mouse
    */
   interactionType?: 'mouse' | 'touch' | 'keyboard',
-  // If using fake timers user should provide something like (time) => jest.advanceTimersByTime(time))}
-  // A real timer user would pass async () => await new Promise((resolve) => setTimeout(resolve, waitTime))
+  // If using fake timers user should provide something like (time) => jest.advanceTimersByTime(time))}.
+  // A real timer user would pass (waitTime) => new Promise((resolve) => setTimeout(resolve, waitTime))
   // Time is in ms.
   /**
    * A function used by the test utils to advance timers during interactions. Required for certain aria patterns (e.g. table). This can be overridden
    * at the aria pattern tester level if needed.
    */
-  advanceTimer?: (time?: number) => void | Promise<unknown>
+  advanceTimer?: (time: number) => unknown | Promise<unknown>
 }
 
 export interface BaseTesterOpts extends UserOpts {
@@ -69,7 +69,11 @@ export interface MenuTesterOpts extends BaseTesterOpts {
   /**
    * Whether the current menu is a submenu.
    */
-  isSubmenu?: boolean
+  isSubmenu?: boolean,
+  /**
+   * The root menu of the menu tree. Only available if the menu is a submenu.
+   */
+  rootMenu?: HTMLElement
 }
 
 export interface SelectTesterOpts extends BaseTesterOpts {

packages/@react-aria/test-utils/src/user.ts

@@ -67,7 +67,7 @@ type TesterOpts<T> =
   T extends 'Tree' ? TreeTesterOpts :
   never;
 
-let defaultAdvanceTimer = async (waitTime: number | undefined) => await new Promise((resolve) => setTimeout(resolve, waitTime));
+let defaultAdvanceTimer = (waitTime: number | undefined) => new Promise((resolve) => setTimeout(resolve, waitTime));
 
 export class User {
   private user;

packages/@react-spectrum/combobox/docs/ComboBox.mdx

@@ -1006,7 +1006,7 @@ import {theme} from '@react-spectrum/theme-default';
 import {User} from '@react-spectrum/test-utils';
 
 let testUtilUser = new User({interactionType: 'mouse'});
-// ...
+// Other setup, be sure to check out the suggested mocks mentioned above in https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#testing
 
 it('ComboBox can select an option via keyboard', async function () {
   // Render your test component/app and initialize the combobox tester