react-lazy-hydration icon indicating copy to clipboard operation
react-lazy-hydration copied to clipboard

Cypress tests fail for hydrated components

Open justman00 opened this issue 4 years ago • 2 comments

Here is a reproducible repo: https://github.com/justman00/react-lazy-hydration-cypress. When running yarn e2e and selecting the only available test, observe how the tests fail. I found a workaround of how to fix them is to give display: contents; to the child container, see https://github.com/justman00/react-lazy-hydration-cypress/blob/main/components/MyLayout.js#L9. I would like to understand what would cause it to fail and why it is being fixed by another wrapper with the mentioned above styles.

justman00 avatar Dec 22 '20 14:12 justman00

Unfortunately setting display: contents; on an inner wrapper solves the Cypress issue but breaks the functionality of the hydration, resulting in components being non-functional anymore

justman00 avatar Dec 23 '20 14:12 justman00

I usually reset the prop to style={null} so it just shows a div. There's also a noWrapper prop you can add onto it to prevent it creating a wrapping element

ScriptedAlchemy avatar Oct 13 '21 05:10 ScriptedAlchemy