Testing TreeView

General setup

TreeView features long press interactions on its rows depending on the row actions provided and if the user is interacting with the tree on a touch device. Please see the following sections in the general testing documentation for more information on how to handle these behaviors in your test suite.

Timers

Long press

Test utils

@react-spectrum/test-utils offers common tree interaction utilities which you may find helpful when writing tests. To install, simply add it to your dev dependencies via your preferred package manager.

Once installed, you can access the User that @react-spectrum/test-utils provides in your test file as shown below. This user only needs to be initialized once and then can be used to generate the TreeView tester in your test cases. This gives you access to TreeView specific utilities that you can then call within your test to query for specific subcomponents or simulate common interactions. The example test case below shows how you might go about setting up the TreeView tester, use it to simulate row expansion and selection, and verify the tree's state after each interaction.

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

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

it('TreeView can select 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');
});

See below for the full definition of the User and the TreeView tester.

Properties

Methods

Properties

Methods

Testing FAQ