reactjsreact-selecttesting-libraryuser-event

React-Select & User-Event Library


I would like to test my react-select component using User-Event-Testing-Library (https://testing-library.com/docs/ecosystem-user-event/).
I just want to test if select open the menu if clicked.

Here is my code:

If I use fireEvent it works, however if I use useEvent it's not working..

  test('should open select onclick', () => {
    const wrapper = render(
      <ReactSelect
        className="select"
        classNamePrefix="select"
        options={[{ value: '0', label: 'Label' }]}
      />,
    );
    expect(
      wrapper.container.getElementsByClassName('select__option').length,
    ).toBe(0);

    fireEvent(wrapper.container.querySelector('input')); //WORKING
    userEvent.click(wrapper.container.querySelector('input')); // NOT WORKING

    expect(
      wrapper.container.getElementsByClassName('select__option').length,
    ).toBe(1);
  });

Solution

  • I finally upgraded Jest to v26 and it's working.