dnb-stack
dnb-stack copied to clipboard
robipop22
Cypress Tests are failing due to hydration error
This occurs with the latest upgrade of React to 18.2.0.
Related issues :
https://github.com/facebook/react/issues/24430 https://github.com/remix-run/remix/issues/2947
Waiting for a fix, if not we will revert to react 17 version of hydrate.
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?
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.
@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;
}
});
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
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.
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.
@alexamy you can use the intermediate fix I put above to avoid Cypress errors.
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 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