emotion icon indicating copy to clipboard operation
emotion copied to clipboard

Multiple errors when using latest Emotion with Enzyme

Open ismailcherri opened this issue 1 year ago • 6 comments

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:

  1. Nested Self Enclosed styled divs throw errors with shallow renders
  2. HOC with children function throws errors with shallow renders
  3. 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",

ismailcherri avatar Mar 23 '23 14:03 ismailcherri