Testing Picker

Test utils

@react-spectrum/test-utils offers common picker interaction testing utilities. Install it with your preferred package manager.

npm install @react-spectrum/test-utils --dev

Initialize a User object at the top of your test file, and use it to create a Picker 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.

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

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

it('Picker can select an option via keyboard', async function () {
  // Render your test component/app and initialize the select tester
  let {getByTestId} = render(
    <Picker data-testid="test-select">
    ...
    </Picker>
  );
  let selectTester = testUtilUser.createTester('Select', {root: getByTestId('test-select'), interactionType: 'keyboard'});
  let trigger = selectTester.getTrigger();
  expect(trigger).toHaveTextContent('Select an item');

  await selectTester.toggleOptionSelection({option: 'Cat'});
  expect(trigger).toHaveTextContent('Cat');
});

API

User

Properties

Methods

SelectTester

Testing FAQ