You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We run e2e cypress test on a React web application. The application itself is huge and we have more than +500 tests scenarios and everything was working smoothly.
We decided to upgrade react from 16.14.0 to 18.2.0 . Manually browsing everything looks fine, however, the automated tests started failling and we are facing a problem were upon clicking a button that redirect to the next route the blur event is not being fired from the input component.
The text aims to verify that the text input value is updated and upon navigating to the next route the success message contains the document name. Unfortunately the text remains as the initial text instead of the updated one causing the test to fail.
Here is a small video of the problem:
ShareX_Ls2cxxhYKh.mp4
At first I thought that the origin of the problem could be:
Webpack - as stated in the docs since the latest version cypress use webpack v5 and the react application is still using webpack 4. So I tried to force cypress to use webpack v4 as in the main project by using @cypress/webpack-preprocessor v2.x.x but the test failed
React and react-router problem - I checked the changelogs and the only notable changes on the event in react-dom is that since version 17.0.0 react delegate events to roots instead of document and that they use focusin and focusout for onFocus and onBlur events as stated here. But creating a small side project with the same configurations / packages and behaviour as in the main project the tests passed.
We have a workaround that is to explicit call cy.get("[data-testid=text-input]").clear().type("text input updated").blur(); before clicking on the button but we want to understand whether this issue stems from a problem on our side or if there might be an underlying issue with cypress handling click events and focus/blur events.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi,
We run e2e cypress test on a React web application. The application itself is huge and we have more than +500 tests scenarios and everything was working smoothly.
We decided to upgrade react from
16.14.0
to18.2.0
. Manually browsing everything looks fine, however, the automated tests started failling and we are facing a problem were upon clicking a button that redirect to the next route the blur event is not being fired from the input component.Here's a simplified version of the test:
The text aims to verify that the text input value is updated and upon navigating to the next route the success message contains the document name. Unfortunately the text remains as the initial text instead of the updated one causing the test to fail.
Here is a small video of the problem:
ShareX_Ls2cxxhYKh.mp4
At first I thought that the origin of the problem could be:
@cypress/webpack-preprocessor v2.x.x
but the test failed17.0.0
react delegate events to roots instead of document and that they use focusin and focusout for onFocus and onBlur events as stated here. But creating a small side project with the same configurations / packages and behaviour as in the main project the tests passed.We have a workaround that is to explicit call
cy.get("[data-testid=text-input]").clear().type("text input updated").blur();
before clicking on the button but we want to understand whether this issue stems from a problem on our side or if there might be an underlying issue with cypress handling click events and focus/blur events.Best regards
Beta Was this translation helpful? Give feedback.
All reactions