Currently you have to export all classes and then collect them in an array to pass to typegraphl's resolvers option.

Ideally these are picked up automatically so you don't have to specify all of them. This could be done with a custom decorator which internally calls the original Resolver from typegraphql.

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.