It's been a couple of days that I'm struggling with a test I'm trying to write and thought this would be a good place to ask for some tips. I'm trying to fill a form that uses react-select dropdowns, and these forms are inside a map that renders 4 of them. However when trying to run the code below on the selectors of each form in a loop, after the first iteration which runs fine, the input element found in the form to perform the onChange doesn't have the onChange handler and doesn't trigger the change function to select the option I need. The package I am using for the selection is react-select-event as per the documentation here. I am still a beginner with react-testing-library and testing in general so it's quite probable that I missed something. Any tips or ideas are welcome! Thank you 🙂

const selectOptionAndAssertValue = async (indicator, field, element, option, inputForm) => {
  await selectEvent.select(element, option.label, {
    container: document.body,
  });

  await waitFor(
    async () => {
      expect(inputForm).toHaveFormValues({
        [${indicator.short_alias}-${field}]: option.value,
      });
    },
    {
      onTimeout: error => console.log(error),
    }
  );
};

Note: to find the inputForm, I am using findByLabelText and it does find the element.

EDIT: Issue replicated in this repo https://github.com/ildaballiu/select-testing-demo