userEvent.selectOptions does not trigger onChange event

• @testing-library/user-event version: 12.0.0
• Testing Framework and version: jest@24.7.1
• DOM Environment: jsdom@14.1.0

Relevant code or config

// Select.js
import React from "react";

const Select = props => {
  const handleChange = e => {
    console.log(e.target.value);
    props.test(e.target.value);

  };
  return (
    <select data-testid="select" onChange={handleChange}>
      <option data-testid="first" value="first">
        first
      </option>
      <option data-testid="second" value="second">
        second
      </option>
      <option data-testid="third" value="third">
        third
      </option>
    </select>
  );
};
export default Select;

// Select.test.js
  import React from 'react';
  import Select from './Select';
  import userEvent from '@testing-library/userEvent';
  import render from '@testing-library/react';


  test("`userEvent.selectOptions` should trigger an onChange event", () => {
    const mockTest = jest.fn().mockImplementation(val => console.log(val));
    const { getByTestId, debug } = render(<Select test={mockTest} />);
    const select = getByTestId("select");
    const second = getByTestId("second");

    userEvent.selectOptions(select, ["second"]);
    debug();
    console.log(select.value)
    expect(mockTest).toHaveBeenCalledTimes(1);
    expect(mockTest).toHaveBeenCalledWith('second');
    expect(second.selected).toBe(true);
  });

What you did: I first noticed this behavior in a larger project, so I made a small repo to reproduce.

I made a <select/> element in React that fires a function received from props onChange. This behavior works as expected in the browser. When testing the behavior, I can successfully assert that a mocked version of that onChange function is called when I trigger a change event (via importing fireEvent from RTL), but cannot assert that the same mock is called when using userEvent.selectOptions.

What happened:

Reproduction repository: https://github.com/khalidwilliams/select-test-demo

Problem description: userEvent.selectOptions doesn’t trigger a change event. onChange handlers won’t fire in tests that use this method, leading to problems with testing any change-dependent behavior.

Suggested solution: I’m not sure what the best solution is, it seems like this line may not be firing as expected? Please let me know if there’s something I’m missing here – I’m happy to keep digging!

[arjun-js]

It is happening now for select dropdowns.

I am using userEvent.selectOptions to change the value. I am able to change the value but the change event is not getting triggered.

I am using:

@testing-library/user-event : 13.5.0

[Bhuvanesh-git331]

const dbEle=document.getElementById(‘schemaname’) const optionEle=document.createElement(‘option’) optionEle.setAttribute(‘value’, ‘el_cardnumber_3’) dbEle.domNode = optionEle dbEle.appendChild(optionEle); console.log(screen.debug(document.querySelectorAll(‘option’)[1])) userEvent.selectOptions(dbEle, document.querySelectorAll(‘option’)[1])

//Hi I tried the above method its working for me. The onChange event is getting triggered