Testing Table

General setup

Table features long press interactions on its rows depending on the row actions provided and if the user is interacting with the table 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-aria/test-utils offers common table 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-aria/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 Table tester in your test cases. This gives you access to Table 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 Table tester, use it to simulate row selection, and verify the table's state after each interaction.

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

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

it('Table can toggle row selection', async function () {
  // Render your test component/app and initialize the table tester
  let {getByTestId} = render(
    <Table data-testid="test-table" selectionMode="multiple">
    ...
    </Table>
  );
  let tableTester = testUtilUser.createTester('Table', {root: getByTestId('test-table')});
  expect(tableTester.selectedRows).toHaveLength(0);

  await tableTester.toggleSelectAll();
  expect(tableTester.selectedRows).toHaveLength(10);

  await tableTester.toggleRowSelection({row: 2});
  expect(tableTester.selectedRows).toHaveLength(9);
  let checkbox = within(tableTester.rows[2]).getByRole('checkbox');
  expect(checkbox).not.toBeChecked();

  await tableTester.toggleSelectAll();
  expect(tableTester.selectedRows).toHaveLength(10);
  expect(checkbox).toBeChecked();

  await tableTester.toggleSelectAll();
  expect(tableTester.selectedRows).toHaveLength(0);
});

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

Properties

Methods

Properties

Methods

Testing FAQ