selectEvent.select not working after updating to react 18

after updating to react 18 the following test is failing

  it('testing selecting item', async () => {
    const onChangeSpy = jest.fn();
    const options = [
      {
        value: 1,
        label: 'One',
      },
      {
        value: 2,
        label: 'Two',
      },
    ];
    render(<Select options={options} value={undefined} label="Label" inputId="id" onChange={onChangeSpy} />);

    await selectEvent.select(screen.getByLabelText('Label'), ['Two']);

    expect(onChangeSpy).toHaveBeenCalledWith(options[1], expect.any(Object));
  });

The error message is

Unable to find an element with the text: Two. This could 
be because the text is broken up by multiple elements. 
In this case, you can provide a function for 
your text matcher to make your matcher more flexible.

[morganr1]

@sindrisig Not sure but, this may or may not help you. I’ve recently updated my project from React 17 -> 18 using react-select + react-select-event for testing as you’ve shown above.

I found I had to use openMenu first before I could make a selection in certain scenarios (in my case using a react-select/creatable component).

Also worth noting I had to select the target input via a good old fashioned document.getElementById method.

const advertiserInput = document.getElementById('react-select-2-input');
await selectEvent.openMenu(advertiserInput);
await selectEvent.select(advertiserInput, 'Tony');

Seems like its not playing nicely with the selectors of RTL 😞

Hope this helps m8!

[romgain]

@annidai I unfortunately don’t have time to work on this right now, but I will merge PRs if anyone else can contribute a fix 😀