eva
eva copied to clipboard
Make theme objects identifieable
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
@Photonios thanks for a proposal 👍 It also potentially helps to solve https://github.com/akveo/react-native-ui-kitten/issues/1038, so that we can compare identifiers instead of whole theme objects in shouldComponentUpdate
, for example.
I started thinking about this, but that's a good point to discuss, because now theme is a plain object, meaning we need to think where exactly identifier property should be placed.