React error UI overlay fails the tests

[AnvarAka1]

After migration from react v16 to react v18, when any error occurs in dev or testing environment, there is error UI overlay occurs, covering DOM elements. That's why cypress cannot continue testing. The thing is, that these errors do not affect how UI works.

For instance, Firebase library sometimes gives an error and the UI error overlay comes in, but in React v16, you could completely ignore this error and continue testing or using the app as you want, cause Firebase functionality is not crucial there. But in React v18 it shows that overlay, even though the UI is completely stable under the overlay.

Here is the screenshot of the overlay, but with another error. I could not reproduce Firebase error now, cause it happens randomly:

Could you please suggest something to resolve this problem, cause there are almost 300 test cases in that project. It takes a lot of time to run all the tests completely and this overlay can break all the tests after, for example 30 minutes, when half of the tests are done.

[ZachJW34]

Are you using webpack or vite? There is a configuration option for both that allows you to disable overlays.
https://vitejs.dev/config/#server-hmr
https://webpack.js.org/configuration/dev-server/#overlay

Would need more info to point you towards a proper solution (such as if you are using a framework like create-react-app or if you are writing component vs e2e tests)

[tester-at-bmi]

Guess it is not really a neat solution, but since i'm encountering this aswell in my environment for now i came up with the following solution.

Cypress.on('uncaught:exception', (err, runnable) => {
	cy.get('iframe[id="react-refresh-overlay"]').then($iframe => {
		const $body = $iframe.contents().find('body')
		cy.wrap($body).find('button[id="close"]').click({multiple:true});
	});	  
	console.log(`uncaught:exception: ${err}`);
	return false;
});