import {Layout} from '../../../src/Layout'; export default Layout;

import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; import testUtilDocs from 'docs:@react-spectrum/test-utils'; import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ';

export const isSubpage = true; export const hideFromSearch = true; export const tags = ['testing', 'combobox', 'test-utils']; export const description = 'Testing ComboBox with React Spectrum test utils';

Testing ComboBox

Test utils

@react-spectrum/test-utils offers common combobox 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 ComboBox 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.

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

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

it('ComboBox can select an option via keyboard', async function () {
  // Render your test component/app and initialize the combobox tester
  let {getByTestId} = render(
    <ComboBox data-testid="test-combobox">
      ...
    </ComboBox>
  );
  let comboboxTester = testUtilUser.createTester('ComboBox', {root: getByTestId('test-combobox'), interactionType: 'keyboard'});

  await comboboxTester.open();
  expect(comboboxTester.listbox).toBeInTheDocument();

  let options = comboboxTester.options();
  await comboboxTester.selectOption({option: options[0]});
  expect(comboboxTester.combobox.value).toBe('One');
  expect(comboboxTester.listbox).not.toBeInTheDocument();
});

API

User

ComboBoxTester

Testing FAQ