How to select an option from a select list with React Testing Library - react-testing-library

Question

I have a normal select list. I need to test handleChoice gets called when I choose an option. How can I do this with React Testing Library?
<select
onChange={handleChoice}
data-testid="select"
>
<option value="default">Make your choice</option>
{attributes.map(item => {
return (
<option key={item.key} value={item.key}>
{item.label}
</option>
);
})}
</select>
getByDisplayValue with the value of item.label doesn't return anything, perhaps this is because it's not visible on the page?

Answer 1

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

Answer 2

This solution didn't work for me, what did work, was userEvent.
https://testing-library.com/docs/ecosystem-user-event/
import React from 'react';
import { render } from '#testing-library/react';
import userEvent from '#testing-library/user-event';
import App from './App';
test('Simulates selection', () => {
const { getByTestId } = render(<App />);
// where <value> is the option value without angle brackets!
userEvent.selectOptions(getByTestId('select'), '<value>');
expect((getByTestId('<value>') as HTMLOptionElement).selected).toBeTruthy();
expect((getByTestId('<another value>') as HTMLOptionElement).selected).toBeFalsy();
//...
})
You can also forgo having to add a data-testid to the select element if you have a label (which you should!), and simply use getByLabelText('Select')
Further still, you can get rid of the additional data-testid on each option element, if you use getByText.
<label for="selectId">
Select
</label>
<select
onChange={handleChoice}
id="selectId"
>
<option value="default">Make your choice</option>
{attributes.map(item => {
return (
<option key={item.key} value={item.key}>
{item.label}
</option>
);
})}
</select>
Then:
import React from 'react';
import { render } from '#testing-library/react';
import userEvent from '#testing-library/user-event';
import App from './App';
test('Simulates selection', () => {
const { getByLabelText, getByText } = render(<App />);
// where <value> is the option value without angle brackets!
userEvent.selectOptions(getByLabelText('<your select label text>'), '<value>');
expect((getByText('<your selected option text>') as HTMLOptionElement).selected).toBeTruthy();
expect((getByText('<another option text>') as HTMLOptionElement).selected).toBeFalsy();
//...
})
This seems a more optimal way to do this type of test.

Answer 3

**In 2021, you can use userEvent which comes as part of the React Testing Library ecosystem. It allows you to write tests which are closer to real user behaviour. Example
it('should correctly set default option', () => {
render(<App />)
expect(screen.getByRole('option', {name: 'Make a choice'}).selected).toBe(true)
})
it('should allow user to change country', () => {
render(<App />)
userEvent.selectOptions(
// Find the select element
screen.getByRole('combobox'),
// Find and select the Ireland option
screen.getByRole('option', {name: 'Ireland'}),
)
expect(screen.getByRole('option', {name: 'Ireland'}).selected).toBe(true)
})
Have a look at this article for more info on how to test select elements using React Testing Library.

Answer 4

You can also use getByText which will save you from adding the data-testid attribute
In my case I did
import { screen } from '#testing-library/react';
....
<select>
<option value="foo">Foo</option>
<option selected value="bar">Bar</option>
</select>
....
expect((screen.getByText('Foo') as HTMLOptionElement).selected).toBeFalsy();
expect((screen.getByText('Bar') as HTMLOptionElement).selected).toBeTruthy();

Answer 5

This seems simpler to me:
userEvent.selectOptions(screen.getByLabelText('County'), 'Aberdeenshire');

Answer 6

1: Install user-event V14 and above
npm:
npm install --save-dev #testing-library/user-event
yarn:
yarn add --dev #testing-library/user-event
2: Import and set in up: (it's a default import so make sure you didn't import named one)
import userEvent from '#testing-library/user-event';
test('should change data', async () => {
const user = userEvent.setup();
});
3: Change selected option and test:
import userEvent from '#testing-library/user-event';
test('should change data', async () => {
const user = userEvent.setup();
// Check if default value in correct:
expect(screen.getByRole('option', { name: /default option/i }).selected).toBeTruthy();
// Change option: (Make sure to use Async/Await syntax)
await user.selectOptions(screen.getByRole("combobox"), 'optionToSelect');
// Check the result:
expect(screen.getByRole('option', { name: /optionToSelect/i }).selected).toBeTruthy();
});

Answer 7

In my case I was checking a number against a string, which failed. I had to convert the number with toString() to make it work.
The HTML:
<select>
<option value="1">Hello</option>
<option value="2">World</option>
</select>
And in my test:
await fireEvent.change(select, { target: { value: categories[0].id.toString() } });
expect(options[1].selected).toBeTruthy();