Skip to content

Make theme objects identifieable #69

@Photonios

Description

@Photonios

It would be nice to add a symbol to the theme objects so they can easily be identified.

A good reason for this is to be able to easily write a custom Jest snapshot serializer and avoids the entire theme from being serialized into the snapshot.

We have a custom Jest snapshot serializer that does this, but it has to rely on checking for the existence of several theme properties to identify the theme object. This is inefficient and a little bit fragile.

class EVADesignThemeSerializer {
    test(value) {
        if (!value || typeof value !== 'object' || util.types.isProxy(value)) {
            return false;
        }

        return (
            value.hasOwnProperty('color-primary-100') &&
            value.hasOwnProperty('color-primary-transparent-100') &&
            value.hasOwnProperty('color-success-100') &&
            value.hasOwnProperty('color-success-transparent-100') &&
            value.hasOwnProperty('color-info-100') &&
            value.hasOwnProperty('color-warning-100') &&
            value.hasOwnProperty('color-warning-transparent-100') &&
            value.hasOwnProperty('color-danger-100') &&
            value.hasOwnProperty('outline-color')
        );
    }

    print() {
        return '[EVADesignTheme]';
    }
}

see: https://jestjs.io/docs/en/configuration#snapshotserializers-arraystring

Here is how this works for identifying React test elements:

https://github.com/facebook/jest/blob/968a301902796a5082b0119b82a6a996a20e1448/packages/pretty-format/src/plugins/ReactTestComponent.ts#L80

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions