Implement the @emotion/jest serializer for storyshots to include the style information

[geisterfurz007]

Why

Currently snapshots look like this:

  <button
    type="button"
    label="Button"
    class=".chakra-button .css-oqfhsh"
  >
    Button
  </button>

With chakra-button supposedly containing the default chakra styling and css-oqfhsh containing additional style information processed by emotion. Getting to know this additional style information is desirable since it allows for more subtle changes in colors to be detected that Chromatic doesn't seem to pick up.

How?

Following https://emotion.sh/docs/testing, this should be as easy as adding the @emotion/jest/serializer to the snapshotSerializer array, however in tests that didn't seem to suffice.

From my understanding the order of operations needs to be:

1. Preact renders story to object
2. Emotion serializer resolves the styles
3. Preact object is rendered to HTML
4. Emotion serializer replaces the styles

Step 2-4 should "just" function within the emotion serializer given that the correct snapshot serializer is used from the provided array, getting the story rendered to an object however has been proven to be a bigger issue in earlier attempts.

[geisterfurz007]

Closing before archive.