Test Failure after react upgrade: Input Text not firing onBlur event on click button

[cfthody]

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 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.

Here's a simplified version of the test:

describe("Documentsr", () => {
    it("Create Document", () => {
        const documentName = ""Document_vo2qqa";
        cy.get("[data-testid=text-input]").should("not.be.empty");
        cy.get("[data-testid=text-input]").clear().type(documentName);
        cy.get("[data-testid=save]").click();
        cy.contains("Document '" + documentName + "' successfully created.");
    });
});

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.

Best regards

[mfanselmo]

Hey @cfthody did you ever find a more robust solution other than manually blurring before clickng the button? I am trying to migrate from react 17 to 18 and running into exactly the same issue