React Spectrum
Beta PreviewDocsReleasesBlog
Picker

Testing Picker

Test utils

@react-spectrum/test-utils offers common picker 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 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.trigger;
  expect(trigger).toHaveTextContent('Select an item');

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

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.

SelectTester

Properties

NameType
sectionsHTMLElement[]
Returns the select's sections if present.
listboxHTMLElement | null
Returns the select's listbox if present.
triggerHTMLElement
Returns the select's trigger.

Methods

constructor(opts: ): void
setInteractionType(type: ['interactionType']): void
Set the interaction type used by the select tester.
open(opts: ): Promise<void>
Opens the select. Defaults to using the interaction type set on the select tester.
close(): Promise<void>
Closes the select.
findOption(opts: {
optionIndexOrText: number | string
}): HTMLElement
Returns a option matching the specified index or text content.
selectOption(opts: ): Promise<void>
Selects the desired select option. Defaults to using the interaction type set on the select tester. If necessary, will open the select dropdown beforehand. The desired option can be targeted via the option's node, the option's text, or the option's index.
options(opts: {
element?: HTMLElement
}): HTMLElement[]
Returns the select's options if present. Can be filtered to a subsection of the listbox if provided via element.

Testing FAQ