React Aria
Beta PreviewDocsReleasesBlog
Tree

Testing Tree

General setup

Tree supports long press interactions on its rows in certain configurations. See the following sections on how to handle these behaviors in your tests.

Test utils

@react-aria/test-utils offers common tree interaction testing utilities. Install it with your preferred package manager.

Initialize a User object at the top of your test file, and use it to create a Tree pattern tester in your test cases. The tester has methods that you can call within your test to query for specific subcomponents or simulate common interactions.

// Tree.test.ts
import {render, within} from '@testing-library/react';
import {User} from '@react-aria/test-utils';

let testUtilUser = new User({
  interactionType: 'mouse'
});
// ...

it('Tree can select and expand a item via keyboard', async function () {
  // Render your test component/app and initialize the Tree tester
  let {getByTestId} = render(
    <Tree data-testid="test-tree" selectionMode="multiple">
      ...
    </Tree>
  );
  let treeTester = testUtilUser.createTester('Tree', {root: getByTestId('test-tree'), interactionType: 'keyboard'});

  await treeTester.toggleRowSelection({row: 0});
  expect(treeTester.selectedRows).toHaveLength(1);
  expect(within(treeTester.rows[0]).getByRole('checkbox')).toBeChecked();

  await treeTester.toggleRowSelection({row: 1});
  expect(treeTester.selectedRows).toHaveLength(2);
  expect(within(treeTester.rows[1]).getByRole('checkbox')).toBeChecked();

  await treeTester.toggleRowSelection({row: 0});
  expect(treeTester.selectedRows).toHaveLength(1);
  expect(within(treeTester.rows[0]).getByRole('checkbox')).not.toBeChecked();

  await treeTester.toggleRowExpansion({index: 0});
  expect(treeTester.rows[0]).toHaveAttribute('aria-expanded', 'true');
});

API

Properties

NameTypeDefault
advanceTimer['advanceTimer']Default: —
A function used by the test utils to advance timers during interactions. Required for certain aria patterns (e.g. table).
interactionType['interactionType']Default: mouse
The interaction type (mouse, touch, keyboard) that the test util user will use when interacting with a component. This can be overridden at the aria pattern util level if needed.

Methods

constructor(opts: ): void
createTester<T extends >(patternName: T, opts: <T>): <T>
Creates an aria pattern tester, inheriting the options provided to the original user.

Properties

NameType
selectedRowsHTMLElement[]
Returns the tree's selected rows if any.
rowsHTMLElement[]
Returns the tree's rows if any.
treeHTMLElement
Returns the tree.

Methods

constructor(opts: ): void
setInteractionType(type: ['interactionType']): void
Set the interaction type used by the tree tester.
findRow(opts: {
rowIndexOrText: number | string
}): HTMLElement
Returns a row matching the specified index or text content.
toggleRowSelection(opts: ): Promise<void>
Toggles the selection for the specified tree row. Defaults to using the interaction type set on the tree tester. Note that this will endevor to always add/remove JUST the provided row to the set of selected rows.
toggleRowExpansion(opts: ): Promise<void>
Toggles the expansion for the specified tree row. Defaults to using the interaction type set on the tree tester.
triggerRowAction(opts: ): Promise<void>
Triggers the action for the specified tree row. Defaults to using the interaction type set on the tree tester.
cells(opts: {
element?: HTMLElement
}): HTMLElement[]
Returns the tree's cells if any. Can be filtered against a specific row if provided via element.

Testing FAQ