test: enhance emotion serializer on React 18 to remove random values in class names

[tkajtoch]

Summary

This PR extends the scope of our emotion serializer to replace random emotion prefixes with emotion for class attributes in DOM snapshots. It is necessary to work with React 18 and is backwards compatible.

QA

1. Checkout this branch
2. Run yarn to ensure modules are up to date
3. Run REACT_VERSION=17 yarn test-unit and verify all tests are passing
4. Run yarn test-unit and verify that all snapshots are passing and there are no failed tests caused by mismatched class attribute. It is expected for some other tests to fail.
   Please note that jest will never finish due to EuiIcon unit tests running indefinitely on React 18.

[cee-chen]

[this may not make sense to do, just thinking out loud]

• Just to clarify, does this only affect Enzyme and not RTL?
• If so, does it make sense at all to try and detect Enzyme vs RTL?
  • I believe you can import ShallowWrapper or ReactWrapper from enzyme and check whether the constructor name equals ShallowWrapper.name or ReactWrapper.name to determine if it's an Enzyme val/node

No worries if it doesn't make sense to do this - the goal of this question is to see if we can future-proof this for when we've moved off of Enzyme and fully onto RTL. It would be nice to have slightly cleaner code if so - but if we can't, that's fine too

[tkajtoch]

I debugged my code again to remember what it did when I first implemented this logic. Emotion serializer is called with already processed react test objects that are indistinguishable between Enzyme and RTL renders, and I don't know if it would even be possible to reliably detect what library they're coming from.

[cee-chen]

It is possible - I did so within my snapshot serializer spike (#6769, ctrl+F for isShallowWrapper, isReactWrapper, and isCheerioWrapper specifically).

I can pull this PR down here in a bit to play with it if you can confirm this only affects Enzyme. TBH, I am a little surprised that this hasn't come up on Emotion's issue repo, but I'm guessing potentially not a lot of people are using the new React 18 adapter?

[tkajtoch]

Yeah my assumption is that running Enzyme with the hacky React 18 adapter AND emotion is such a rare case that nobody really had the same issue...

[tkajtoch]

Oh I know what you mean, I'm actually reusing the test function from @emotion/jest now and it seems to return correct results for RTL and Enzyme. We still need to run emotion serializer for both RTL and Enzyme and serialize doesn't seem to have constructor available at all as it's already converted to test objects.

I'm open to any ideas you may have to adding this check :)

[cee-chen]

From local testing: this appears to primarily only affect render/Cheerio from Enzyme and not mount or shallow snapshots. This definitely feels like something we can write a conditional for and ideally remove once we're fully off Enzyme, or at least off Enzyme render. 🤞

[cee-chen]

@tkajtoch Actually, since this only affects Enzyme's render, one other option could be for us to do a wholesale find+replace of Enzyme render with RTL render in main (and then update the React 18 feature branch against latest main).

We mostly only use Enzyme render for snapshots, so it should be a fairly 1:1 replacement. WDYT? We get to pay down some minor tech debt and skip having to add extra serializer logic (that will go stale once we're off Enzyme) at the same time 🤷

[tkajtoch]

I'll give it a try!

[tkajtoch]

Superseded by #6968, #6969, #6970, #6971, #6972, #6973, #6974, #6975, #6976, #6977