This occurs with the latest upgrade of React to 18.2.0. Related issu

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Cypress Tests are failing due to hydration error about dnb-stack HOT 10 OPEN

robipop22 commented on May 23, 2024 4

Cypress Tests are failing due to hydration error

from dnb-stack.

Comments (10)

andrecasal commented on May 23, 2024 4

If your tests are failing because Cypress is clicking the app before it re-hydrated, you can set a class after it re-hydrates on the root.tsx:

export const App = () => {
	const htmlRef = useRef<HTMLHtmlElement>(null)

	useEffect(() => {
		if(htmlRef.current) {
			htmlRef.current.classList.add('hydrated')
		}
	}, [])

	return (
		<html ref={htmlRef} lang="en">
			//...
		</html>
	)

Then, on your Cypress tests, you could do something like:

cy.visit('http://localhost:3000')
cy.get('html').should('have.class', 'hydrated')

// App rehydrated, you can now click stuff

from dnb-stack.

wrporter commented on May 23, 2024 1

The way Remix is handling this in their template projects fixed the issue for us. See how they use isbot and use a different React render callback function: https://github.com/remix-run/blues-stack/blob/03f54f7978ce5ba111caae6e2a377bb78843e648/app/entry.server.tsx#L16-L26

from dnb-stack.

alexamy commented on May 23, 2024 1

I'm experiencing this error with Remix 1.12.0 and React 18.2.0 too in dev mode.

Solution (kinda of) is to run tests on a build version served with remix-serve build.

from dnb-stack.

robipop22 commented on May 23, 2024 1

@alexamy you can use the intermediate fix I put above to avoid Cypress errors.

from dnb-stack.

wrporter commented on May 23, 2024

My team is running into this with our E2E tests via Cypress on React 18.2.0. Our E2E tests won't work at all due to this issue. I tried @ryanyogan's suggestion in the referenced issue, but that didn't resolve the problem for me. Is there another known workaround?

from dnb-stack.

robipop22 commented on May 23, 2024

hey @wrporter,
I also tried that fix, but did not work.

One solution, which is not really a "solution" is to downgrade the react dom client to v17 hydrate.

revert entry.client.tsx to this

import { RemixBrowser } from '@remix-run/react';
import { hydrate } from 'react-dom';

hydrate(<RemixBrowser />, document);

Meanwhile, I'm waiting for a new React release.

from dnb-stack.

robipop22 commented on May 23, 2024

@wrporter I found a better fix.
I'm going to leave this issue open anyway until it gets officially fixed.
But in the meantime, we can ignore the respective error via Cypress:
You can put this in cypress/support/commands.ts

Cypress.on('uncaught:exception', err => {
	// we check if the error is
	if (err.message.includes('Minified React error #418;') || err.message.includes('Minified React error #423;')) {
		return false;
	}
});

from dnb-stack.

robipop22 commented on May 23, 2024

I just added the isbot case, but it's still failing without the cypress fix.
I'm going to leave both fixes for this stack for now.

from dnb-stack.

neelamshah02 commented on May 23, 2024

any update on this?

from dnb-stack.

robipop22 commented on May 23, 2024

@neelamshah02 still waiting for a new React version that will address this.
In the meantime you either ignore the error in Cypress tests, or in a Remix app there is this workaround: https://github.com/Xiphe/remix-island

from dnb-stack.

Cypress Tests are failing due to hydration error about dnb-stack HOT 10 OPEN

Comments (10)

Related Issues (3)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent