emotion
emotion copied to clipboard
Multiple errors when using latest Emotion with Enzyme
Description: We are currently using React with Emotion UI and we have some tests that still use Enzyme. We have currently the following versions:
"@emotion/react": "11.5.0",
"@emotion/styled": "11.3.0",
"enzyme": "3.11.0",
"enzyme-to-json": "3.6.2",
"@emotion/jest": "11.5.0",
When we tried to upgrade to the latest Emotion UI we encountered a lot of errors that are caused by this version. I already opened a PR to report one of them (which was the first one to discover). Later, we discovered two more. In summary here are the issues that happen while using the Emotion Enzyme Serializer:
- Nested Self Enclosed styled divs throw errors with shallow renders
- HOC with children function throws errors with shallow renders
- Using
dive
throws errors (this particular one happens with the latest emotion/react and emotion/css)
To reproduce:
I created this repository: https://github.com/ismailcherri/emotion-issues/tree/main. In which there is a test file containing all the issues: https://github.com/ismailcherri/emotion-issues/blob/main/src/App.test.js
All the tests in the repository will pass if you change the package versions to the ones mentioned above.
Expected behavior:
The tests should work as expected
Environment information:
"@emotion/react": "11.5.0",
"@emotion/styled": "11.3.0",
"enzyme": "3.11.0",
"enzyme-to-json": "3.6.2",
"@emotion/jest": "11.5.0",