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.

• Timers
• Long press

Test utils

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

npm install @react-aria/test-utils --dev

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 an 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.getSelectedRows()).toHaveLength(1);
  expect(within(treeTester.getRows()[0]).getByRole('checkbox')).toBeChecked();

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

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

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

API

User

Properties

Methods

TreeTester

Testing FAQ