testing library userEvent.selectOptions does not select option

Question

I have a React component which renders a combobox (another external component) with an option. When deployed the component does work as expected.

<select class="country-select"
         id="nationalityCode" name="nationalityCode" required="">
    <option value="" disabled="" hidden="">Choose</option>
    <optgroup label="Most used">
        <option value="0052">Belgium</option>
        <option value="0055">German Citizien</option>
        <option value="0057">French</option>
        <option value="0001">Dutch</option>
    </optgroup>
    <optgroup label="Alle Nationalities">
        <option value="0052">Belgium</option>
        <option value="0055">German Citizien</option>
        <option value="0057">French</option>
        <option value="0001">Dutch</option>
        <option value="0050">Albanese</option>
        <option value="0223">American Citizen</option>

    </optgroup>
</select>

When using testing library userEvent.selectOptions, the select of an option is successfull. Only the expect fails with

Error: expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

When debugging the selection state for all options it shows that the initial selected option is selected.

    if (changeValue.nationaliteit) {
        const selectOption = screen.getAllByRole('option', { name: 'French' })[0];
        await userEvent.selectOptions(
            screen.getByRole('combobox', { name: 'Nationaliteit' }),
            selectOption
        );
        expect(
            (screen.getAllByRole('option', { name: 'French' })[0] as HTMLOptionElement).selected
        ).toBe(true);
    }

Using

    "@testing-library/user-event": "^14.4.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^12.1.5",

You have `{ name: 'Nationaliteit' }` but your `select` element is not named like that. — Gabriele Petrioli, May 09 '23 at 05:40

score 0 · Answer 1 · answered May 09 '23 at 05:35

It should work. A working example:

index.tsx:

import React from 'react';

export const MyComponent = () => {
  return (
    <label>Nationaliteit
      <select id="nationalityCode" name="nationalityCode" >
        <option>Choose</option>
        <optgroup label="Most used">
          <option value="0052">Belgium</option>
          <option value="0055">German Citizien</option>
          <option value="0057">French</option>
          <option value="0001">Dutch</option>
        </optgroup>
        <optgroup label="Alle Nationalities">
          <option value="0052">Belgium</option>
          <option value="0055">German Citizien</option>
          <option value="0057">French</option>
          <option value="0001">Dutch</option>
          <option value="0050">Albanese</option>
          <option value="0223">American Citizen</option>
        </optgroup>
      </select>
    </label>
  )
}

index.test.tsx:

import { render, screen } from "@testing-library/react"
import userEvent from '@testing-library/user-event';
import React from "react"
import { MyComponent } from './'

describe('74627696', () => {
  test('should pass', async () => {
    const user = userEvent.setup();
    render(<MyComponent />);
    const listbox = screen.getByRole('combobox', { name: 'Nationaliteit' });
    const selectOption = screen.getAllByRole('option', { name: 'French' })[0]
    await user.selectOptions(listbox, selectOption)
    expect((screen.getAllByRole('option', { name: 'French' })[0] as HTMLOptionElement).selected).toBe(true)
  })
})

Test result:

 PASS  stackoverflow/74627696/index.test.tsx (20.691 s)
  74627696
    ✓ should pass (406 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        22.071 s, estimated 31 s

package version:

"react": "^16.14.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^14.4.3",
"@testing-library/jest-dom": "^5.11.6",

testing library userEvent.selectOptions does not select option

1 Answers1