Multiple errors when using latest Emotion with Enzyme

[ismailcherri]

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",

[torressam333]

@ismailcherri Any idea on this? Are you using this babel preset: '@emotion/babel-preset-css-prop' ?

I am on react 16.8 and emption 11.13.x and enzyme 3.11.0. When I run my jasmine tests I see errors in my components. If I find a failing test and go to the component and comment out for example

 <span
                        //css={styles.ratingLabel}
                        children={text.replace('and', '&')}
                    />

Then that same test passes.

[ismailcherri]

Hey @torressam333 It seems to be a different case than mine. We ended up dropping Enzyme all together 😄

[torressam333]

@ismailcherri what did you end up moving to?

[ismailcherri]

@ismailcherri what did you end up moving to?

React testing Library with Jest

[torressam333]

I want to move to this from (Karma/Enzyme/Jasmine). Did you happen to document your migration and would be willing to share? @ismailcherri

[ismailcherri]

I want to move to this from (Karma/Enzyme/Jasmine). Did you happen to document your migration and would be willing to share? @ismailcherri

It was a collective effort. There is not much to share. Basically, gradually replacing the tests with RTL. I think our case was easier because we already used Jest with Enzyme. You can check the documentation for suggested migration path