Autocomplete

const countries = [
  { code: 'af', name: 'Afghanistan' },
  // ...continued
];

// Tested component where state is being managed
const TestedComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const [selectedCountry, setSelectedCountry] = useState<Country | null>(null);

  const options = useMemo(() => {
    const searchValue = inputValue.toLowerCase();

    return countries
      .filter(country => country.name.startsWith('A'))
      .filter(country => country.name.toLowerCase().startsWith(searchValue))
      .slice(0, 6);
  }, [inputValue]);

  return (
    <AutocompleteField
      label="Country"
      value={inputValue}
      onChange={e => setInputValue(e.target.value)}
    >
      <AutocompleteSelect
        name="country"
        value={selectedCountry.code}
        onChange={e => {
          const newCountry = countries.find(country => country.code === e.target.value) ?? null;
          setSelectedCountry(newCountry);
        }}
      >
        {selectedCountry ? (
          <Option
            label={selectedCountry.name}
            value={selectedCountry.code} />
         ) : null}
      </AutocompleteSelect>

      <AutocompleteListbox aria-label="Country suggestions">
        <AutocompleteOptionGroup label="A">
          {options.map(option => (
            <AutocompleteOption key={option.code} label={option.name} value={option.code}>
              {option.name}
            </AutocompleteOption>
          ))}
        </AutocompleteOptionGroup>
      </AutocompleteListbox>
  </AutocompleteField>
};

render(<TestedComponent />);

const combobox = screen.getByRole('combobox', {
  name: 'Country',
});

// The listbox, clear button, and the options elements will all be hidden
// on first render. To unhide them, search for something:
userEvent.type(combobox, 'a');

expect(combobox).toHaveDisplayValue('a');
expect(listbox).toBeVisible();

const clearButton = screen.getByRole('button', {
  name: 'Clear',
});

const listbox = screen.getByRole('listbox', {
  name: 'Country suggestions',
});

const group = within(listbox).getByRole('group', {
  name: 'A',
});

const afghanistanOption = within(group).getByRole('option', {
  name: 'Afghanistan',
});

// To select an option:
userEvent.click(afghanistanOption);

// To clear the selected option:
userEvent.click(clearButton);

// Note: we recommend that you do not directly assert the selected value.
// Instead, assert displayed values and things you can see. If the selected
// value changes something else in the UI, assert on that instead