Testing Tabs

General setup

Tabs features automatic tab collapse behavior and may need specific mocks to test said behavior. TODO: update this with what mocks are required

Test utils

@react-spectrum/test-utils offers common tabs 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 Tabs tester in your test cases. This gives you access to Tabs 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 Tabs tester, use it to change tab selection, and verify the tabs' state after each interaction.

// Tabs.test.ts
import {render} from '@testing-library/react';
import {User} from '@react-spectrum/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]);
});

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

Properties

Methods

Properties

Methods

Testing FAQ