1

I have a dropdown that onChange sets the options for a second dropdown.

The first dropdown triggers a setState which triggers a useEffect that filters existing data into a list that is mapped into the second dropdown.

This works great in the browser, but in Cypress 10.4, when the first dropdown is selected, and the value is confirmed to have changed, the second dropdown only re-renders with new values about 5% of the time usually after clicking "rerun". The rest of the time it maintains default state, so all tests depending on it fail.

Things I've tried that don't work:

  • explicitly waiting for the dropdown data API call (the data is there; Cypress just doesn't trigger react to re-render)
  • select('val1').trigger('onchange') for the first selection
  • select('val1').trigger('blur') for the first selection
  • .contains('val1').click({force:true}).click({force:true}) for the first selection
  • this thing: select dropdownlist item using cypress
  • installing cypress-react-selector and trying cy.waitForReact()

Does anyone have a solution to this?

Andres Gardiol
  • 1,312
  • 15
  • 22
A. Luca
  • 43
  • 5

1 Answers1

0

With hooks the fibre thread does not always complete in a Cypress test.

Try yielding after triggering the onchange

select('val1').trigger('onchange')
cy.wait(0)                          // yields the thread to React
Fody
  • 23,754
  • 3
  • 20
  • 37