How to select an option from a select list with React Testing Library

by

Add data-testid to the options

  <option data-testid="select-option" key={item.key} value={item.key}>
      {item.label}
  </option>

Then, in the test call fireEvent.change, get all the options by getAllByTestId and check the selected option:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import App from './App';

test('Simulates selection', () => {
  const { getByTestId, getAllByTestId } = render(<App />);
  //The value should be the key of the option
  fireEvent.change(getByTestId('select'), { target: { value: 2 } })
  let options = getAllByTestId('select-option')
  expect(options[0].selected).toBeFalsy();
  expect(options[1].selected).toBeTruthy();
  expect(options[2].selected).toBeFalsy();
  //...
})

For your question, the getByDisplayValue works only on displayed values

Leave a Comment

tech