React Spectrum
Beta PreviewDocsReleasesBlog
TableView

Testing TableView

General setup

TableView 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-spectrum/test-utils offers common table 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 TableView 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.

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

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

it('TableView can toggle row selection', async function () {
  // Render your test component/app and initialize the table tester
  let {getByTestId} = render(
    <TableView data-testid="test-table" selectionMode="multiple">
    ...
    </TableView>
  );
  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);
});

API

User

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.

TableTester

Properties

NameType
rowHeadersHTMLElement[]
Returns the row headers within the table if any.
selectedRowsHTMLElement[]
Returns the currently selected rows within the table if any.
rowsHTMLElement[]
Returns the rows within the table if any.
columnsHTMLElement[]
Returns the columns within the table.
rowGroupsHTMLElement[]
Returns the row groups within the table.
tableHTMLElement
Returns the table.

Methods

constructor(opts: ): void
setInteractionType(type: ['interactionType']): void
Set the interaction type used by the table tester.
toggleRowSelection(opts: ): Promise<void>
Toggles the selection for the specified table row. Defaults to using the interaction type set on the table tester.
toggleSort(opts: ): Promise<void>
Toggles the sort order for the specified table column. Defaults to using the interaction type set on the table tester.
triggerColumnHeaderAction(opts: ): Promise<void>
Triggers an action for the specified table column menu. Defaults to using the interaction type set on the table tester.
triggerRowAction(opts: ): Promise<void>
Triggers the action for the specified table row. Defaults to using the interaction type set on the table tester.
toggleSelectAll(opts: {
interactionType?: ['interactionType']
}): Promise<void>
Toggle selection for all rows in the table. Defaults to using the interaction type set on the table tester.
findRow(opts: {
rowIndexOrText: number | string
}): HTMLElement
Returns a row matching the specified index or text content.
findCell(opts: {
text: string
}): HTMLElement
Returns a cell matching the specified text content.
cells(opts: {
element?: HTMLElement
}): HTMLElement[]
Returns the cells within the table if any. Can be filtered against a specific row if provided via element.

Testing FAQ