react-lazy-hydration
react-lazy-hydration copied to clipboard
Cypress tests fail for hydrated components
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.
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
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