feat: Test utils API audit, additional feature coverage (RTL, grid nav, etc) in prep for RC/1.0 by LFDanLu · Pull Request #9998 · adobe/react-spectrum

LFDanLu · 2026-04-29T22:35:30Z

See commits for what changed

Some additional pattern support to be opened in a different PR maybe, to discuss if we think they are worth it or not.

✅ 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:

RSP

…d select all

also gives us the option of adding args in the future

this is a lower level than using react testing library of which we wernt really using anything unique from that library. trade off is that we need to wrap act so it works for other react versions, still not 100% sure if we wanna do this

…essages more descriptive

rspbot · 2026-04-30T18:11:10Z

Build successful! 🎉

rspbot · 2026-04-30T20:59:42Z

Build successful! 🎉

… convert tests

rspbot · 2026-05-01T20:38:39Z

Build successful! 🎉

…s-1.0

rspbot · 2026-05-01T22:41:39Z

Build successful! 🎉

rspbot · 2026-05-01T22:41:40Z

## API Changes

@react-aria/test-utils

/@react-aria/test-utils:CheckboxGroupTester

 CheckboxGroupTester {
-  checkboxes: Array<HTMLElement>
-  checkboxgroup: HTMLElement
+  checkboxes: () => Array<HTMLElement>
+  checkboxgroup: () => HTMLElement
   constructor: (CheckboxGroupTesterOpts) => void
   findCheckbox: ({
-    checkboxIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  selectedCheckboxes: Array<HTMLElement>
+  selectedCheckboxes: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   toggleCheckbox: (TriggerCheckboxOptions) => Promise<void>
 }

/@react-aria/test-utils:ComboBoxTester

 ComboBoxTester {
   close: () => Promise<void>
-  combobox: HTMLElement
+  combobox: () => HTMLElement
   constructor: (ComboBoxTesterOpts) => void
   findOption: ({
-    optionIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  focusedOption: HTMLElement | null
-  listbox: HTMLElement | null
+  focusedOption: () => HTMLElement | null
+  listbox: () => HTMLElement | null
   open: (ComboBoxOpenOpts) => Promise<void>
   options: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  sections: Array<HTMLElement>
-  selectOption: (ComboBoxSelectOpts) => Promise<void>
+  sections: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
-  trigger: HTMLElement
+  toggleOptionSelection: (ComboBoxSelectOpts) => Promise<void>
+  trigger: () => HTMLElement
 }

/@react-aria/test-utils:DialogTester

 DialogTester {
   close: () => Promise<void>
   constructor: (DialogTesterOpts) => void
-  dialog: HTMLElement | null
+  dialog: () => HTMLElement | null
   open: (DialogOpenOpts) => Promise<void>
   setInteractionType: (UserOpts['interactionType']) => void
-  trigger: HTMLElement
+  trigger: () => HTMLElement
 }

/@react-aria/test-utils:GridListTester

 GridListTester {
   cells: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
   constructor: (GridListTesterOpts) => void
   findRow: ({
-    rowIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  gridlist: HTMLElement
-  rows: Array<HTMLElement>
-  selectedRows: Array<HTMLElement>
+  gridlist: () => HTMLElement
+  rows: () => Array<HTMLElement>
+  selectedRows: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   toggleRowSelection: (GridListToggleRowOpts) => Promise<void>
   triggerRowAction: (GridListRowActionOpts) => Promise<void>
 }

/@react-aria/test-utils:ListBoxTester

 ListBoxTester {
   constructor: (ListBoxTesterOpts) => void
   findOption: ({
-    optionIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  listbox: HTMLElement
+  listbox: () => HTMLElement
   options: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  sections: Array<HTMLElement>
-  selectedOptions: Array<HTMLElement>
+  sections: () => Array<HTMLElement>
+  selectedOptions: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   toggleOptionSelection: (ListBoxToggleOptionOpts) => Promise<void>
   triggerOptionAction: (ListBoxOptionActionOpts) => Promise<void>
 }

/@react-aria/test-utils:MenuTester

 MenuTester {
   close: () => Promise<void>
   constructor: (MenuTesterOpts) => void
   findOption: ({
-    optionIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  menu: HTMLElement | null
+  menu: () => HTMLElement | null
   open: (MenuOpenOpts) => Promise<void>
-  openSubmenu: (MenuOpenSubmenuOpts) => Promise<MenuTester | null>
+  openSubmenu: (MenuOpenSubmenuOpts) => Promise<MenuTester>
   options: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  sections: Array<HTMLElement>
-  selectOption: (MenuSelectOpts) => Promise<void>
+  sections: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
-  submenuTriggers: Array<HTMLElement>
-  trigger: HTMLElement
+  submenuTriggers: () => Array<HTMLElement>
+  toggleOptionSelection: (MenuSelectOpts) => Promise<void>
+  trigger: () => HTMLElement
 }

/@react-aria/test-utils:RadioGroupTester

 RadioGroupTester {
   constructor: (RadioGroupTesterOpts) => void
   findRadio: ({
-    radioIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  radiogroup: HTMLElement
-  radios: Array<HTMLElement>
-  selectedRadio: HTMLElement | null
+  radiogroup: () => HTMLElement
+  radios: () => Array<HTMLElement>
+  selectedRadio: () => HTMLElement | null
   setInteractionType: (UserOpts['interactionType']) => void
   triggerRadio: (TriggerRadioOptions) => Promise<void>
 }

/@react-aria/test-utils:SelectTester

 SelectTester {
   close: () => Promise<void>
   constructor: (SelectTesterOpts) => void
   findOption: ({
-    optionIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  listbox: HTMLElement | null
+  listbox: () => HTMLElement | null
   open: (SelectOpenOpts) => Promise<void>
   options: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  sections: Array<HTMLElement>
-  selectOption: (SelectTriggerOptionOpts) => Promise<void>
+  sections: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
-  trigger: HTMLElement
+  toggleOptionSelection: (SelectTriggerOptionOpts) => Promise<void>
+  trigger: () => HTMLElement
 }

/@react-aria/test-utils:TableTester

 TableTester {
   cells: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  columns: Array<HTMLElement>
+  columns: () => Array<HTMLElement>
   constructor: (TableTesterOpts) => void
   findCell: ({
     text: string
 }) => HTMLElement
   findRow: ({
-    rowIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  rowGroups: Array<HTMLElement>
-  rowHeaders: Array<HTMLElement>
-  rows: Array<HTMLElement>
-  selectedRows: Array<HTMLElement>
+  footerRows: () => Array<HTMLElement>
+  rowGroups: () => Array<HTMLElement>
+  rowHeaders: () => Array<HTMLElement>
+  rows: () => Array<HTMLElement>
+  selectedRows: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
-  table: HTMLElement
+  table: () => HTMLElement
   toggleRowExpansion: (TableToggleExpansionOpts) => Promise<void>
   toggleRowSelection: (TableToggleRowOpts) => Promise<void>
   toggleSelectAll: ({
     interactionType?: UserOpts['interactionType']
   toggleSort: (TableToggleSortOpts) => Promise<void>
   triggerColumnHeaderAction: (TableColumnHeaderActionOpts) => Promise<void>
   triggerRowAction: (TableRowActionOpts) => Promise<void>
 }

/@react-aria/test-utils:TabsTester

 TabsTester {
-  activeTabpanel: HTMLElement | null
+  activeTabpanel: () => HTMLElement | null
   constructor: (TabsTesterOpts) => void
   findTab: ({
-    tabIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  selectedTab: HTMLElement | null
+  selectedTab: () => HTMLElement | null
   setInteractionType: (UserOpts['interactionType']) => void
-  tablist: HTMLElement
-  tabpanels: Array<HTMLElement>
-  tabs: Array<HTMLElement>
+  tablist: () => HTMLElement
+  tabpanels: () => Array<HTMLElement>
+  tabs: () => Array<HTMLElement>
   triggerTab: (TriggerTabOptions) => Promise<void>
 }

/@react-aria/test-utils:TreeTester

 TreeTester {
   cells: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
   constructor: (TreeTesterOpts) => void
   findRow: ({
-    rowIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  rows: Array<HTMLElement>
-  selectedRows: Array<HTMLElement>
+  rows: () => Array<HTMLElement>
+  selectedRows: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   toggleRowExpansion: (TreeToggleExpansionOpts) => Promise<void>
   toggleRowSelection: (TreeToggleRowOpts) => Promise<void>
-  tree: HTMLElement
+  tree: () => HTMLElement
   triggerRowAction: (TreeRowActionOpts) => Promise<void>
 }

@react-spectrum/test-utils

/@react-spectrum/test-utils:CheckboxGroupTester

 CheckboxGroupTester {
-  checkboxes: Array<HTMLElement>
-  checkboxgroup: HTMLElement
+  checkboxes: () => Array<HTMLElement>
+  checkboxgroup: () => HTMLElement
   constructor: (CheckboxGroupTesterOpts) => void
   findCheckbox: ({
-    checkboxIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  selectedCheckboxes: Array<HTMLElement>
+  selectedCheckboxes: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   toggleCheckbox: (TriggerCheckboxOptions) => Promise<void>
 }

/@react-spectrum/test-utils:ComboBoxTester

 ComboBoxTester {
   close: () => Promise<void>
-  combobox: HTMLElement
+  combobox: () => HTMLElement
   constructor: (ComboBoxTesterOpts) => void
   findOption: ({
-    optionIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  focusedOption: HTMLElement | null
-  listbox: HTMLElement | null
+  focusedOption: () => HTMLElement | null
+  listbox: () => HTMLElement | null
   open: (ComboBoxOpenOpts) => Promise<void>
   options: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  sections: Array<HTMLElement>
-  selectOption: (ComboBoxSelectOpts) => Promise<void>
+  sections: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
-  trigger: HTMLElement
+  toggleOptionSelection: (ComboBoxSelectOpts) => Promise<void>
+  trigger: () => HTMLElement
 }

/@react-spectrum/test-utils:DialogTester

 DialogTester {
   close: () => Promise<void>
   constructor: (DialogTesterOpts) => void
-  dialog: HTMLElement | null
+  dialog: () => HTMLElement | null
   open: (DialogOpenOpts) => Promise<void>
   setInteractionType: (UserOpts['interactionType']) => void
-  trigger: HTMLElement
+  trigger: () => HTMLElement
 }

/@react-spectrum/test-utils:GridListTester

 GridListTester {
   cells: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
   constructor: (GridListTesterOpts) => void
   findRow: ({
-    rowIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  gridlist: HTMLElement
-  rows: Array<HTMLElement>
-  selectedRows: Array<HTMLElement>
+  gridlist: () => HTMLElement
+  rows: () => Array<HTMLElement>
+  selectedRows: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   toggleRowSelection: (GridListToggleRowOpts) => Promise<void>
   triggerRowAction: (GridListRowActionOpts) => Promise<void>
 }

/@react-spectrum/test-utils:ListBoxTester

 ListBoxTester {
   constructor: (ListBoxTesterOpts) => void
   findOption: ({
-    optionIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  listbox: HTMLElement
+  listbox: () => HTMLElement
   options: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  sections: Array<HTMLElement>
-  selectedOptions: Array<HTMLElement>
+  sections: () => Array<HTMLElement>
+  selectedOptions: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   toggleOptionSelection: (ListBoxToggleOptionOpts) => Promise<void>
   triggerOptionAction: (ListBoxOptionActionOpts) => Promise<void>
 }

/@react-spectrum/test-utils:MenuTester

 MenuTester {
   close: () => Promise<void>
   constructor: (MenuTesterOpts) => void
   findOption: ({
-    optionIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  menu: HTMLElement | null
+  menu: () => HTMLElement | null
   open: (MenuOpenOpts) => Promise<void>
-  openSubmenu: (MenuOpenSubmenuOpts) => Promise<MenuTester | null>
+  openSubmenu: (MenuOpenSubmenuOpts) => Promise<MenuTester>
   options: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  sections: Array<HTMLElement>
-  selectOption: (MenuSelectOpts) => Promise<void>
+  sections: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
-  submenuTriggers: Array<HTMLElement>
-  trigger: HTMLElement
+  submenuTriggers: () => Array<HTMLElement>
+  toggleOptionSelection: (MenuSelectOpts) => Promise<void>
+  trigger: () => HTMLElement
 }

/@react-spectrum/test-utils:RadioGroupTester

 RadioGroupTester {
   constructor: (RadioGroupTesterOpts) => void
   findRadio: ({
-    radioIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  radiogroup: HTMLElement
-  radios: Array<HTMLElement>
-  selectedRadio: HTMLElement | null
+  radiogroup: () => HTMLElement
+  radios: () => Array<HTMLElement>
+  selectedRadio: () => HTMLElement | null
   setInteractionType: (UserOpts['interactionType']) => void
   triggerRadio: (TriggerRadioOptions) => Promise<void>
 }

/@react-spectrum/test-utils:SelectTester

 SelectTester {
   close: () => Promise<void>
   constructor: (SelectTesterOpts) => void
   findOption: ({
-    optionIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  listbox: HTMLElement | null
+  listbox: () => HTMLElement | null
   open: (SelectOpenOpts) => Promise<void>
   options: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  sections: Array<HTMLElement>
-  selectOption: (SelectTriggerOptionOpts) => Promise<void>
+  sections: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
-  trigger: HTMLElement
+  toggleOptionSelection: (SelectTriggerOptionOpts) => Promise<void>
+  trigger: () => HTMLElement
 }

/@react-spectrum/test-utils:TableTester

 TableTester {
   cells: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
-  columns: Array<HTMLElement>
+  columns: () => Array<HTMLElement>
   constructor: (TableTesterOpts) => void
   findCell: ({
     text: string
 }) => HTMLElement
   findRow: ({
-    rowIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  rowGroups: Array<HTMLElement>
-  rowHeaders: Array<HTMLElement>
-  rows: Array<HTMLElement>
-  selectedRows: Array<HTMLElement>
+  footerRows: () => Array<HTMLElement>
+  rowGroups: () => Array<HTMLElement>
+  rowHeaders: () => Array<HTMLElement>
+  rows: () => Array<HTMLElement>
+  selectedRows: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
-  table: HTMLElement
+  table: () => HTMLElement
   toggleRowExpansion: (TableToggleExpansionOpts) => Promise<void>
   toggleRowSelection: (TableToggleRowOpts) => Promise<void>
   toggleSelectAll: ({
     interactionType?: UserOpts['interactionType']
   toggleSort: (TableToggleSortOpts) => Promise<void>
   triggerColumnHeaderAction: (TableColumnHeaderActionOpts) => Promise<void>
   triggerRowAction: (TableRowActionOpts) => Promise<void>
 }

/@react-spectrum/test-utils:TabsTester

 TabsTester {
-  activeTabpanel: HTMLElement | null
+  activeTabpanel: () => HTMLElement | null
   constructor: (TabsTesterOpts) => void
   findTab: ({
-    tabIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  selectedTab: HTMLElement | null
+  selectedTab: () => HTMLElement | null
   setInteractionType: (UserOpts['interactionType']) => void
-  tablist: HTMLElement
-  tabpanels: Array<HTMLElement>
-  tabs: Array<HTMLElement>
+  tablist: () => HTMLElement
+  tabpanels: () => Array<HTMLElement>
+  tabs: () => Array<HTMLElement>
   triggerTab: (TriggerTabOptions) => Promise<void>
 }

/@react-spectrum/test-utils:TreeTester

 TreeTester {
   cells: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
   constructor: (TreeTesterOpts) => void
   findRow: ({
-    rowIndexOrText: number | string
+    indexOrText: number | string
 }) => HTMLElement
-  rows: Array<HTMLElement>
-  selectedRows: Array<HTMLElement>
+  rows: () => Array<HTMLElement>
+  selectedRows: () => Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   toggleRowExpansion: (TreeToggleExpansionOpts) => Promise<void>
   toggleRowSelection: (TreeToggleRowOpts) => Promise<void>
-  tree: HTMLElement
+  tree: () => HTMLElement
   triggerRowAction: (TreeRowActionOpts) => Promise<void>
 }

LFDanLu added 17 commits April 27, 2026 15:07

add proper keyboard navigation to combobox

af2817e

mutiple select for combobox, api rename for consitency, table keyboar…

4e1c651

…d select all

add tests for deselect

d828424

get rid of timer warnings cuz user gives a default if not provided

9cc80d8

change getters into method calls for consistency

2556c18

also gives us the option of adding args in the future

update instances of old getters to new function calls

0f0bd7d

update instances of old getters to new function calls

c694bb4

switch to dom testing library

c9125d3

this is a lower level than using react testing library of which we wernt really using anything unique from that library. trade off is that we need to wrap act so it works for other react versions, still not 100% sure if we wanna do this

support missing RTL for expand and keyboard nav

1beb706

standardize indexOrText option naming

59994d3

throw when attempting to interact with disabled rows and make error m…

c86baaf

…essages more descriptive

update readmes and docs to reflect change to testing-library/dom

53187c3

more audit items

8a871db

add tests to cover error messages

a20ca65

cleanup todos that we are punting on/not doing

348c5f7

add grid navigation to listbox test util and fix browser tests

3c4d45e

add grid nav to gridlist too

b1ca6f4

github-actions Bot added RAC S2 labels Apr 29, 2026

add browser tests for each pattern to make sure utils work with it

226f5d9

LFDanLu added 3 commits April 30, 2026 11:55

adding midding dialog testing pages to RAC

3e45ed4

add rough skills for the test utils

1687d0d

forgot to save

3e6d64a

LFDanLu marked this pull request as ready for review April 30, 2026 22:47

LFDanLu added the ready for review label Apr 30, 2026

LFDanLu added 3 commits April 30, 2026 16:36

improvements to skill guidence and utils from attempt to use skill to…

1dc99d1

… convert tests

more improvements from second pass

3fac945

add getter for table footer

bc32b85

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

cf0038a

…s-1.0

LFDanLu force-pushed the test-utils-1.0 branch from 9747b05 to cf0038a Compare May 1, 2026 22:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Test utils API audit, additional feature coverage (RTL, grid nav, etc) in prep for RC/1.0#9998

feat: Test utils API audit, additional feature coverage (RTL, grid nav, etc) in prep for RC/1.0#9998
LFDanLu wants to merge 25 commits intomainfrom
test-utils-1.0

LFDanLu commented Apr 29, 2026

Uh oh!

rspbot commented Apr 30, 2026

Uh oh!

rspbot commented Apr 30, 2026

Uh oh!

rspbot commented May 1, 2026

Uh oh!

rspbot commented May 1, 2026

Uh oh!

rspbot commented May 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

LFDanLu commented Apr 29, 2026

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Apr 30, 2026

Uh oh!

rspbot commented Apr 30, 2026

Uh oh!

rspbot commented May 1, 2026

Uh oh!

rspbot commented May 1, 2026

Uh oh!

rspbot commented May 1, 2026

@react-aria/test-utils

/@react-aria/test-utils:CheckboxGroupTester

/@react-aria/test-utils:ComboBoxTester

/@react-aria/test-utils:DialogTester

/@react-aria/test-utils:GridListTester

/@react-aria/test-utils:ListBoxTester

/@react-aria/test-utils:MenuTester

/@react-aria/test-utils:RadioGroupTester

/@react-aria/test-utils:SelectTester

/@react-aria/test-utils:TableTester

/@react-aria/test-utils:TabsTester

/@react-aria/test-utils:TreeTester

@react-spectrum/test-utils

/@react-spectrum/test-utils:CheckboxGroupTester

/@react-spectrum/test-utils:ComboBoxTester

/@react-spectrum/test-utils:DialogTester

/@react-spectrum/test-utils:GridListTester

/@react-spectrum/test-utils:ListBoxTester

/@react-spectrum/test-utils:MenuTester

/@react-spectrum/test-utils:RadioGroupTester

/@react-spectrum/test-utils:SelectTester

/@react-spectrum/test-utils:TableTester

/@react-spectrum/test-utils:TabsTester

/@react-spectrum/test-utils:TreeTester

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants