React-native-web: Improve snapshot serializer to flatten styles for children

Created on 2 May 2018  ·  1Comment  ·  Source: necolas/react-native-web

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.

Most helpful comment

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

>All comments

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

PaulBGD picture PaulBGD  ·  4Comments

EvanBacon picture EvanBacon  ·  3Comments

rohanprabhu picture rohanprabhu  ·  3Comments

holmesal picture holmesal  ·  3Comments

zhangking picture zhangking  ·  3Comments