Testing Tabs

Test utils

@react-aria/test-utils offers common tabs 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 Tabs 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.

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

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

it('Tabs can change selection via keyboard', async function () {
  // Render your test component/app and initialize the listbox tester
  let {getByTestId} = render(
    <Tabs data-testid="test-tabs">
      ...
    </Tabs>
  );
  let tabsTester = testUtilUser.createTester('Tabs', {root: getByTestId('test-tabs'), interactionType: 'keyboard'});

  let tabs = tabsTester.tabs;
  expect(tabsTester.selectedTab).toBe(tabs[0]);

  await tabsTester.triggerTab({tab: 1});
  expect(tabsTester.selectedTab).toBe(tabs[1]);
});

API

Properties

Methods

Properties

Methods

Testing FAQ