docs: Testing docs #9164

LFDanLu · 2025-11-10T23:58:53Z

same content as #9029, I pulled it out of the docs release since it refers to test utils that haven't been released yet

✅ 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

…_table

…ack to the visual

…ro_docs

…to testing_docs

…ro_docs

…to testing_docs

snowystinger · 2025-11-11T00:01:12Z

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

 export {installMouseEvent, installPointerEvent} from './testSetup';
 export {pointerMap} from './userEventMaps';
 export {User} from './user';
+export type {CheckboxGroupTester} from './checkboxgroup';


this won't have been released yet either, does that matter?

yeah this I'm not going to put into the docs deploy. But in the final release these new testers will be made available so I'll merge that in then

LFDanLu · 2025-11-11T00:13:46Z

This is DNM until the upcoming docs deploy is done

rspbot · 2025-11-18T18:46:52Z

Build successful! 🎉

rspbot · 2025-11-18T18:52:50Z

Build successful! 🎉

rspbot · 2025-11-18T18:52:52Z

## API Changes

@react-aria/test-utils

/@react-aria/test-utils:CheckboxGroupTester

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

/@react-aria/test-utils:ComboBoxTester

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

/@react-aria/test-utils:DialogTester

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

/@react-aria/test-utils:GridListTester

+GridListTester {
+  cells: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  constructor: (GridListTesterOpts) => void
+  findRow: ({
+    rowIndexOrText: number | string
+}) => 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
+}) => HTMLElement
+  listbox: HTMLElement
+  options: ({
+    element?: HTMLElement
+}) => 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
+}) => HTMLElement
+  menu: HTMLElement | null
+  open: (MenuOpenOpts) => Promise<void>
+  openSubmenu: (MenuOpenSubmenuOpts) => Promise<MenuTester | null>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (MenuSelectOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  submenuTriggers: Array<HTMLElement>
+  trigger: HTMLElement
+}

/@react-aria/test-utils:RadioGroupTester

+RadioGroupTester {
+  constructor: (RadioGroupTesterOpts) => void
+  findRadio: ({
+    radioIndexOrText: number | string
+}) => HTMLElement
+  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
+}) => HTMLElement
+  listbox: HTMLElement | null
+  open: (SelectOpenOpts) => Promise<void>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (SelectTriggerOptionOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  trigger: HTMLElement
+}

/@react-aria/test-utils:TableTester

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

/@react-aria/test-utils:TabsTester

+TabsTester {
+  activeTabpanel: HTMLElement | null
+  constructor: (TabsTesterOpts) => void
+  findTab: ({
+    tabIndexOrText: number | string
+}) => HTMLElement
+  selectedTab: HTMLElement | null
+  setInteractionType: (UserOpts['interactionType']) => void
+  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
+}) => HTMLElement
+  rows: Array<HTMLElement>
+  selectedRows: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleRowExpansion: (TreeToggleExpansionOpts) => Promise<void>
+  toggleRowSelection: (TreeToggleRowOpts) => Promise<void>
+  tree: HTMLElement
+  triggerRowAction: (TreeRowActionOpts) => Promise<void>
+}

@react-spectrum/test-utils

/@react-spectrum/test-utils:CheckboxGroupTester

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

/@react-spectrum/test-utils:ComboBoxTester

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

/@react-spectrum/test-utils:DialogTester

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

/@react-spectrum/test-utils:GridListTester

+GridListTester {
+  cells: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  constructor: (GridListTesterOpts) => void
+  findRow: ({
+    rowIndexOrText: number | string
+}) => 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
+}) => HTMLElement
+  listbox: HTMLElement
+  options: ({
+    element?: HTMLElement
+}) => 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
+}) => HTMLElement
+  menu: HTMLElement | null
+  open: (MenuOpenOpts) => Promise<void>
+  openSubmenu: (MenuOpenSubmenuOpts) => Promise<MenuTester | null>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (MenuSelectOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  submenuTriggers: Array<HTMLElement>
+  trigger: HTMLElement
+}

/@react-spectrum/test-utils:RadioGroupTester

+RadioGroupTester {
+  constructor: (RadioGroupTesterOpts) => void
+  findRadio: ({
+    radioIndexOrText: number | string
+}) => HTMLElement
+  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
+}) => HTMLElement
+  listbox: HTMLElement | null
+  open: (SelectOpenOpts) => Promise<void>
+  options: ({
+    element?: HTMLElement
+}) => Array<HTMLElement>
+  sections: Array<HTMLElement>
+  selectOption: (SelectTriggerOptionOpts) => Promise<void>
+  setInteractionType: (UserOpts['interactionType']) => void
+  trigger: HTMLElement
+}

/@react-spectrum/test-utils:TableTester

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

/@react-spectrum/test-utils:TabsTester

+TabsTester {
+  activeTabpanel: HTMLElement | null
+  constructor: (TabsTesterOpts) => void
+  findTab: ({
+    tabIndexOrText: number | string
+}) => HTMLElement
+  selectedTab: HTMLElement | null
+  setInteractionType: (UserOpts['interactionType']) => void
+  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
+}) => HTMLElement
+  rows: Array<HTMLElement>
+  selectedRows: Array<HTMLElement>
+  setInteractionType: (UserOpts['interactionType']) => void
+  toggleRowExpansion: (TreeToggleExpansionOpts) => Promise<void>
+  toggleRowSelection: (TreeToggleRowOpts) => Promise<void>
+  tree: HTMLElement
+  triggerRowAction: (TreeRowActionOpts) => Promise<void>
+}

LFDanLu added 30 commits October 23, 2025 11:48

add FAQ and other sections

edeaa2f

add section for creating custom components

8a1f97e

initial stab at extracting types from style macro

28eb788

testing sizing properties

457c59a

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

a15c24f

…_table

revert export of theme object since it was breaking inference

819c076

adding more values

3b991ea

reorg

42b0406

add the rest of the properties and double check them

36f1a6f

add more type links

e2b29c9

add mdn links for common types and specific css properties

4c94cd0

add relative links so basecolors and various dimension strings link b…

83262ef

…ack to the visual

add descriptions to table and get rid of unessasary isRelative

5d2b172

add short hand and condition tables

980d3d6

add subpage for reference and advanced style macro section

59e9400

support subpage list under the ToC

a414886

forgot to move last bit of content

0b2751d

update FAQ, add mobile related pages, link from RAC styling

4ef4996

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

b04b7af

…ro_docs

fix mobile styling

807beb0

initial react aria testing docs

68a66e0

pare down content for readability

432f702

adding S2 testing docs

78fb92b

add sample subpage content

620ebd7

add style for blockquote

6fdf671

add new test util docs to old website

c051a8c

add examples to new docs

159e76b

clean up old code, no more switcher

50c9e07

refactor test util content so it is in each page

5a10ff0

debug why subpage why failing

5b9fda5

LFDanLu added 16 commits October 31, 2025 17:08

move to subpages

6db86ef

review comments

0c6ac3f

fix build links?

a3d57a9

rename mdx file to fix all links

30bab22

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

44b0d8d

…ro_docs

small fixes

5084b6b

move reference out of subpage and merge styling page

34ad8cc

make icons page lowercase and fix shorthands link

6bf1724

whoops forgot to make git track the capitalization rename

6e508f2

Merge branch 'style_macro_docs' of github.com:adobe/react-spectrum in…

73626ea

…to testing_docs

use isSubPage and update to detect parent link

e799a04

export only the type

f8ec2fb

addressing feedback from quarry team

4b38f98

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

2e13868

…ro_docs

Merge branch 'style_macro_docs' of github.com:adobe/react-spectrum in…

6f69d9e

…to testing_docs

update subpage back button logic

cad6874

snowystinger reviewed Nov 11, 2025

View reviewed changes

LFDanLu changed the title ~~docs: Testing docs~~ docs: (DNM) Testing docs Nov 11, 2025

Base automatically changed from style_macro_docs to main November 11, 2025 01:27

LFDanLu added 3 commits November 18, 2025 10:33

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

10d231d

add testing option back to mobile ToC

2189b24

fix bad merge

e2a12f3

LFDanLu changed the title ~~docs: (DNM) Testing docs~~ docs: Testing docs Nov 18, 2025

LFDanLu added the ready for review label Nov 18, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: Testing docs #9164

docs: Testing docs #9164

Uh oh!

LFDanLu commented Nov 10, 2025 •

edited

Loading

Uh oh!

snowystinger Nov 11, 2025

Uh oh!

LFDanLu Nov 11, 2025

Uh oh!

LFDanLu commented Nov 11, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

docs: Testing docs #9164

Are you sure you want to change the base?

docs: Testing docs #9164

Uh oh!

Conversation

LFDanLu commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

snowystinger Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

LFDanLu Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

LFDanLu commented Nov 11, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

rspbot commented Nov 18, 2025

@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!

4 participants

LFDanLu commented Nov 10, 2025 •

edited

Loading