Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cypress Tests are failing due to hydration error #3

Open
robipop22 opened this issue Jul 28, 2022 · 10 comments
Open

Cypress Tests are failing due to hydration error #3

robipop22 opened this issue Jul 28, 2022 · 10 comments
Assignees
@robipop22
Labels
bug Something isn't working

Comments

@robipop22
Copy link
Owner

This occurs with the latest upgrade of React to 18.2.0.

Related issues :

facebook/react#24430
remix-run/remix#2947

Waiting for a fix, if not we will revert to react 17 version of hydrate.
@robipop22 robipop22 added the bug Something isn't working label Jul 28, 2022
@robipop22 robipop22 self-assigned this Jul 28, 2022
@wrporter
Copy link

wrporter commented Aug 9, 2022

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?

@robipop22
Copy link
Owner Author

robipop22 commented Aug 16, 2022 •
edited

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.

@robipop22
Copy link
Owner Author

robipop22 commented Oct 20, 2022 •
edited

@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;
	}
});

@wrporter
Copy link

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

@robipop22
Copy link
Owner Author

robipop22 commented Oct 20, 2022 •
edited

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.

@alexamy
Copy link

alexamy commented Feb 13, 2023 •
edited

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.

@robipop22
Copy link
Owner Author

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

@andrecasal
Copy link

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

@neelamshah02
Copy link

any update on this?

@robipop22
Copy link
Owner Author

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@robipop22 robipop22

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@alexamy @wrporter @robipop22 @neelamshah02 @andrecasal