Do you want to request a feature or report a bug?
Feature
What is the current behavior?
As of 0.6.1 the RNW snapshot serializer does not flatten styles that are assigned to anything other than a style prop.
The "Composing styles" docs showcases examples of styling a component's children (which is great!), but, unfortunately, the serializer does not flatten these attributes. This results in snapshots constantly changing when the style object updates (i.e. a new number is generated and outputted into the snapshot).
FAIL components/__tests__/EmailFormModal.test.js
● components/EmailFormModal › renders
expect(value).toMatchSnapshot()
Received value does not match stored snapshot 1.
- Snapshot
+ Received
@@ -2,11 +2,11 @@
isMedium={false}
loading={false}
onPrimaryButtonPress={[MockFunction]}
onSecondaryButtonPress={[MockFunction]}
primaryButtonText="Save Changes"
- styleContent={122}
+ styleContent={125}
title="Edit Email"
>
<TextInput
disabled={false}
error=""
20 | />
21 | );
> 22 | expect(wrapper).toMatchSnapshot();
23 | });
24 | });
25 |
at Object.<anonymous> (components/__tests__/EmailFormModal.test.js:22:21)
What is the expected behavior?
The RNW snapshot serializer recursively flattens styles that are assigned to props that _begin_ with style (e.g. style, styleText, styleButton, styleGrandChild).
Definitely open to alternative approaches to flattening children styles, but a prefix naming convention was the simplest approach I though of in the moment.
Probably makes sense to create a jest preset that mocks StyleSheet.create to be the identity function and mocks the components to not render to DOM
Most helpful comment
Probably makes sense to create a jest preset that mocks
StyleSheet.createto be the identity function and mocks the components to not render to DOM