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

LFDanLu · 2025-01-30T01:07:54Z

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

LFDanLu · 2025-01-30T01:09:45Z

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

+      // else {
+      //   // TODO: this is a bit unfortunate, but from a submenu point of view, we can't perform a check that waits for
+      //   // focus to return to the original trigger since we don't have that information in the submenu trigger tester. Even if we did
+      //   // it is a bit unpredicatable where focus might end up landing and waiting for the option/menu to disappear isn't sufficient if there are
+      //   // more transitions in play. For now advance times by a certain amount of time and rely on the user to advance them even more if need be
+      //   if (this._advanceTimer == null) {
+      //     throw new Error('No advanceTimers provided for long press.');
+      //   } else {
+      //     await act(async () => await this._advanceTimer(1000));
+      //   }
+      // }


Did some poking around trying to get rid of the last jest.runAllTimers() here but no luck. The above is ok, but can extend test duration by quite a bit, also seemed to have some problems with hanging that I didn't quite figure out

LFDanLu · 2025-01-30T01:16:29Z

ugh lint blew up, not sure why

LFDanLu · 2025-01-30T01:11:07Z

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

@@ -29,7 +29,7 @@ export interface UserOpts {
   * 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) => void | Promise<unknown> | any


the typing will need to be looked at again for advanceTimers, providing jest.runAllTimers as is threw some TS issues depending on the configuration.

LFDanLu · 2025-01-30T01:11:42Z

packages/@react-spectrum/listbox/docs/ListBox.mdx

@@ -423,7 +423,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/ListBox.html#testing


Hopefully makes it a little more clear that additional setup might be needed for RSP components in general

LFDanLu · 2025-01-30T01:12:31Z

packages/dev/test-utils/package.json

+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",


Doesn't seem to have any breaking changes with this bump and the tests ran clean but will need to confirm on a React 19 project that the test utils work now

LFDanLu · 2025-03-18T16:43:39Z

closing for now, will reopen when I get some time to work some more on this

…_bug_fixes

now we shouldnt need to call runAllTimers after selectOption

rspbot · 2025-04-01T00:41:55Z

Build successful! 🎉

LFDanLu · 2025-04-02T17:20:09Z

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

+      // 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'))
+      ) {


The chain of waitFors below is a bit gross, but allows us to get rid of any assumptions of how long it will take the menu to close/transition out. Open to any alternatives

I think it might be better to pass in a function which could advance the timers by whatever amount.
I'm not sure how waitFor works in a mocked timer situation since technically it does polling which is based on timers.... at least, in the non-mocked timers case. You may want to have a look at the source for waitFor.
The alternative is to do something like test-library does with their userSetup({delay: null/50/100/whatever})

selectOption({option, timerForClose: () => act(() => jest.runAllTimers())})

happy to workshop the name

waitFor advances fake timers if it detects them via: https://github.com/testing-library/dom-testing-library/blob/a86c54ccda5242ad8dfc1c70d31980bdbf96af7f/src/wait-for.js#L75-L82 and does polling. The only thing I'm a bit wary about with regards to making the user pass the timerForClose is twofold:

they may not really know how long they would need to wait (they may be using a third party library/have other conditions that may introduce variable timings to said menu closure). They could of course finagle that timing but I do like how using waitFor under the hood reduces the burden on the user to get the timing right.

API consistency: introducing timerForClose may open the need/possibility of adding the same kind of api to many of the other interaction calls in the utils. Perhaps it would be best for the user to perform their own polling after calling selectOption instead? Perhaps we could expect that they should await focus to return to a specific element outside of the util instead

Ah, didn't know it would advance fakeTimers, that's great, then I think this is fine

LFDanLu · 2025-04-02T17:25:43Z

packages/react-aria-components/test/AriaMenu.test-util.tsx

-          // TODO: not ideal, this runAllTimers is only needed for RSPv3, not RAC or S2
-          act(() => {jest.runAllTimers();});


no longer needed after a selectOption call due to the chain of waitFors, seems to work fine for various levels of open menus but will extensive testing to see if it is too brittle or not

rspbot · 2025-04-02T22:43:10Z

Build successful! 🎉

rspbot · 2025-04-02T22:57:04Z

Build successful! 🎉

snowystinger · 2025-04-03T20:35:38Z

packages/@react-spectrum/table/test/TestTableUtils.test.tsx

@@ -31,7 +31,7 @@ let columns = [
 describe('Table ', function () {
  let onSelectionChange = jest.fn();
  let onSortChange = jest.fn();
-  let testUtilRealTimer = new User();
+  let testUtilRealTimer = new User({advanceTimer: async (waitTime) => await new Promise((resolve) => setTimeout(resolve, waitTime))});


why async? does it not need an act?

yeah it doesn't need the async await here, copy pasta from Analytic's real timer wait util just to mimic their setup as closely as possible to make sure the test-utils would work with their setup. The act happens by whatever calls advanceTimer aka

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

Line 43 in f75223a

await act(async () => await advanceTimer(DEFAULT_LONG_PRESS_TIME));

…_bug_fixes

rspbot · 2025-04-08T17:21:40Z

Build successful! 🎉

rspbot · 2025-04-08T17:21:41Z

## API Changes

@react-aria/test-utils

/@react-aria/test-utils:triggerLongPress

 triggerLongPress {
   opts: {
     element: HTMLElement
-  advanceTimer: (number) => void | Promise<unknown>
+  advanceTimer: (number) => unknown | Promise<unknown>
   pointerOpts?: Record<string, any>
 }
   returnVal: undefined
 }

/@react-aria/test-utils:UserOpts

 UserOpts {
-  advanceTimer?: (number) => void | Promise<unknown>
+  advanceTimer?: (number) => unknown | Promise<unknown>
   interactionType?: 'mouse' | 'touch' | 'keyboard' = mouse
 }

@react-spectrum/test-utils

/@react-spectrum/test-utils:triggerLongPress

 triggerLongPress {
   opts: {
     element: HTMLElement
-  advanceTimer: (number) => void | Promise<unknown>
+  advanceTimer: (number) => unknown | Promise<unknown>
   pointerOpts?: Record<string, any>
 }
   returnVal: undefined
 }

/@react-spectrum/test-utils:UserOpts

 UserOpts {
-  advanceTimer?: (number) => void | Promise<unknown>
+  advanceTimer?: (number) => unknown | Promise<unknown>
   interactionType?: 'mouse' | 'touch' | 'keyboard' = mouse
 }

* chore: Fix generated code sample for S2 TooltipTrigger docs (adobe#8000) * Fix generated code sample for S2 TooltipTrigger docs * review * inlining * fix: export SortDescriptor type from S2 (adobe#8030) * chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider (adobe#7976) * Initial refactor to tear out UNSTABLE_portalContainer in favor of the PortalContainer * yarn.lock update * switch to deprecating UNSTABLE_portalContainer * prefer deprecated prop over context to make this a non-breaking change * add rough docs * updating copy to include explaination of UNSTABLE * rename to UNSAFE_PortalProvider * update copy and split out example * use styles from RAC examples --------- Co-authored-by: Robert Snow <[email protected]> * feat: Add escapeKeyBehavior to GridList/ListBox/Menu/Table/Tree (adobe#7974) * Add disallowClearAll to Menu/ListBox so Autocomplete in Popover can close without clearing selection * add support for diallowClearAll to grid/tree/table * make sure RSP components also surface disallowClearAll * update api naming to escapeKeyBehavior * skip 17 tests for build, investigate later * review comments * fix: useMove broken by NODE_ENV check (adobe#8046) * fix: ColorWheel track click (adobe#8049) * fix: minor typo in CalendarDate docs (adobe#8043) * fix: minor typo in CalendarDate docs * fix second example as well --------- Co-authored-by: Robert Snow <[email protected]> * fix: Updating collection when items change parents (adobe#8052) * export Autocomplete from S2 (adobe#8050) * chore: Optimize table test performance (adobe#8051) * chore: Update typescript to 5.8 (adobe#7888) * chore: update typescript to 5.8 * fix all the types for the upgrade * fix numberfield styles * fix: Apply touch-action by default in usePress (adobe#8047) * fix: Apply touch-action by default in usePress * fix test --------- Co-authored-by: Daniel Lu <[email protected]> * fix: set some better flex behaviour (adobe#8048) * fix: Support React 19 and remove Jest reliance in test utils (adobe#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 * chore: revert ts update (adobe#8060) * fix: add static color to s2 notification badge (adobe#8055) * fix: add static color to s2 notification badge * make opaque * updates * use locale * fix lint --------- Co-authored-by: Robert Snow <[email protected]> * chore: Latest translations (adobe#8036) * Latest translations * Translation correction * Couple of translation corrections * Remove å from Norwegian string --------- Co-authored-by: Yihui Liao <[email protected]> * fix: Relax Parcel version range in public plugins (adobe#8067) * Disclosure button label size update to match new sizes from Specturm (adobe#8006) Co-authored-by: Danni <[email protected]> * chore: audit 3.41 (adobe#8064) * chore: audit 3.41 * remove deprecation * chore: audit 3.41 (adobe#8064) * chore: audit 3.41 * remove deprecation * chore: Update package dependencies for @react-aria/overlays and @react-aria-components * Added @react-aria/ssr and updated @react-aria/overlays in @react-aria/overlays package.json * Added @react-aria/overlays, @react-aria/ssr, and @react-aria/utils in @react-aria-components package.json * chore: Update import paths and dependencies for @react-aria-nutrient * Refactored import statements in various components and tests to use @react-aria-nutrient/overlays instead of @react-aria/overlays. * Removed references to @react-aria/overlays from package.json and yarn.lock. * Updated documentation links to reflect the new package structure. * chore: Update import paths in TableTests to use @react-aria-nutrient * Refactored import statements in TableTests.js to replace @react-aria with @react-aria-nutrient for live-announcer, utils, and focus modules. * Ensured consistency with recent package structure changes. * fix: Add missing newline at end of test files * Ensured proper formatting by adding a newline at the end of Table.test.js and TestTableUtils.test.tsx files to comply with best practices. --------- Co-authored-by: Daniel Lu <[email protected]> Co-authored-by: Trevor Howell <[email protected]> Co-authored-by: Robert Snow <[email protected]> Co-authored-by: Devon Govett <[email protected]> Co-authored-by: DarkstarXDD <[email protected]> Co-authored-by: Robert Snow <[email protected]> Co-authored-by: Reid Barber <[email protected]> Co-authored-by: Yihui Liao <[email protected]> Co-authored-by: Richard Geraghty <[email protected]> Co-authored-by: Kyle Taborski <[email protected]> Co-authored-by: Danni <[email protected]>

LFDanLu added 3 commits January 29, 2025 16:54

attempt to get rid of jest calls in menu util

a32b16e

update RSP testing docs to directly mention mocks that maybe needed

e326a35

bump versions of RTL to 16

9481673

LFDanLu commented Jan 30, 2025

View reviewed changes

LFDanLu closed this Mar 18, 2025

LFDanLu added 3 commits March 31, 2025 13:27

use alternative to calling jest run timers in menu option selection

f625818

fixing types and properly testing long press

69d289f

fix lint

366c1f8

LFDanLu reopened this Mar 31, 2025

LFDanLu added 4 commits March 31, 2025 14:55

Merge branch 'main' of github.com:adobe/react-spectrum into test_util…

5a502b8

…_bug_fixes

revert to pre testing library bump for clean slate

8f55260

fix build and another submenu edge case

93cbb33

now we shouldnt need to call runAllTimers after selectOption

fix react 16 bug

5207639

LFDanLu commented Apr 2, 2025

View reviewed changes

update return type of advanceTimer and docs copy

14452d8

LFDanLu marked this pull request as ready for review April 2, 2025 22:31

LFDanLu changed the title ~~fix: (WIP) Support React 19 and remove Jest reliance in test utils~~ fix: Support React 19 and remove Jest reliance in test utils Apr 2, 2025

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

dd52a74

LFDanLu added the release label Apr 3, 2025

snowystinger reviewed Apr 3, 2025

View reviewed changes

LFDanLu added 2 commits April 3, 2025 15:19

get rid of unneeded async

5d8740c

getting rid of extraneous dep

24805ce

snowystinger previously approved these changes Apr 4, 2025

View reviewed changes

Merge branch 'main' of github.com:adobe/react-spectrum into test_util…

1107831

…_bug_fixes

LFDanLu dismissed snowystinger’s stale review via 1107831 April 8, 2025 17:03

fix lint

82797f6

devongovett approved these changes Apr 8, 2025

View reviewed changes

snowystinger approved these changes Apr 8, 2025

View reviewed changes

LFDanLu added this pull request to the merge queue Apr 8, 2025

Merged via the queue into main with commit a654a33 Apr 8, 2025
30 checks passed

LFDanLu deleted the test_util_bug_fixes branch April 8, 2025 21:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

LFDanLu commented Jan 30, 2025 •

edited by snowystinger

Loading

LFDanLu Jan 30, 2025

LFDanLu commented Jan 30, 2025

LFDanLu Jan 30, 2025

LFDanLu Jan 30, 2025

LFDanLu Jan 30, 2025

LFDanLu commented Mar 18, 2025

rspbot commented Apr 1, 2025

LFDanLu Apr 2, 2025

snowystinger Apr 3, 2025

snowystinger Apr 3, 2025 •

edited

Loading

LFDanLu Apr 3, 2025

snowystinger Apr 4, 2025

LFDanLu Apr 2, 2025 •

edited

Loading

rspbot commented Apr 2, 2025

rspbot commented Apr 2, 2025

snowystinger Apr 3, 2025 •

edited

Loading

LFDanLu Apr 3, 2025

rspbot commented Apr 8, 2025

rspbot commented Apr 8, 2025

		"@testing-library/jest-dom": "^6.0.0",
		"@testing-library/react": "^16.0.0",

		// TODO: not ideal, this runAllTimers is only needed for RSPv3, not RAC or S2
		act(() => {jest.runAllTimers();});

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

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

Conversation

LFDanLu commented Jan 30, 2025 • edited by snowystinger Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Choose a reason for hiding this comment

LFDanLu commented Jan 30, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LFDanLu commented Mar 18, 2025

rspbot commented Apr 1, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snowystinger Apr 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LFDanLu Apr 2, 2025 • edited Loading

Choose a reason for hiding this comment

rspbot commented Apr 2, 2025

rspbot commented Apr 2, 2025

snowystinger Apr 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Apr 8, 2025

rspbot commented Apr 8, 2025

@react-aria/test-utils

/@react-aria/test-utils:triggerLongPress

/@react-aria/test-utils:UserOpts

@react-spectrum/test-utils

/@react-spectrum/test-utils:triggerLongPress

/@react-spectrum/test-utils:UserOpts

LFDanLu commented Jan 30, 2025 •

edited by snowystinger

Loading

snowystinger Apr 3, 2025 •

edited

Loading

LFDanLu Apr 2, 2025 •

edited

Loading

snowystinger Apr 3, 2025 •

edited

Loading