React-testing-library: Error: "too much recursion" when updating a `<select>` element

[jakeboone02]

• @testing-library/react version: 10.4.3
• Testing Framework and version: Jest (whatever version CodeSandbox uses)
• DOM Environment: jsdom (whatever version CodeSandbox uses)

Relevant code or config:

// App.tsx
import React, { ChangeEvent } from 'react';

interface AppProps {
  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
  value: string;
}

export default ({ onChange, value }: AppProps) => (
  <label>
    Test
    <select onChange={onChange} value={value}>
      <option value="TEST">Test</option>
      <option value="TEST2">Test 2</option>
    </select>
  </label>
);

// App.test.tsx
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import App from './App';

it('updates the select', () => {
  const onChange = jest.fn();
  const { getByLabelText } = render(<App onChange={onChange} value="TEST" />);
  userEvent.selectOptions(getByLabelText('Test'), 'TEST2');
  expect(onChange).toHaveBeenCalled();
});



md5-2f63ca010b63053ac549ab7629ee6f98



too much recursion

innerInvokeEventListeners@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1332816
invokeEventListeners@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1331622
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330613
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263
_dispatch@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:1330968
fireAnEvent@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2291879
sendClickToAssociatedNode@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2453267
_activationBehavior@https://1ef6j.csb.app/static/js/jsdom-4.0.0.min.js:1:2454263

Reproduction:

https://codesandbox.io/s/rtl-usereventselectoptions-too-much-recursion-1ef6j?file=/src/App.test.tsx

Problem description:

Updating the value of a <select> element should not error out.

Suggested solution:

N/A

[marcosvega91]

Hi @jakeboone02 thanks for opening this issue :)

As I remember this was an old bug, see here, solved in jsdom.
If you tried to remove the label and access the select with his role combobox test will work.

Maybe this could be a similar issue ?

[jakeboone02]

@marcosvega91 I think you're right. I edited the codesandbox to have two tests, one where the <label> wraps the <select> and one where it's adjacent. The wrapped one fails but the adjacent one passes.

The bug was fixed in [email protected]. I'm using un-ejected create-react-app for the app in question, so I think I'll just have to wait a bit for everything to catch up. In the meantime I moved my <select> out of its <label> to fix the tests.

@nickmccurdy I don't know if this can be worked around in RTL or if we just need to close this ticket since it's an issue with jsdom.

[kentcdodds]

I think since it's a bug in an old version of another project and is solved when things are updated, we can safely close this.