Using the library with Styled Components

[Ingibjorg]

Hi, thank you for a great testing library!
Is there any additional setup I need to do to make the snapshot testing work smoothly with [styled-components](https://github.com/styled-components/styled-components)?

The generated snapshots are not useful as they're missing the entire CSS.

Snapshot with react-test-renderer:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Component SubmitButton renders correctly 1`] = `
<View
  accessible={true}
  isTVSelectable={true}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#006a35",
      "borderColor": "rgba(0, 0, 0, 0)",
      "borderRadius": 24,
      "borderWidth": 1.5,
      "height": 48,
      "justifyContent": "center",
      "marginBottom": 40,
      "marginHorizontal": 36,
      "opacity": 1,
    }
  }
>
  <Text
    labelColor="#fff"
    style={
      Array [
        Object {
          "color": "#fff",
          "fontFamily": "UniversLTPro-65Bold",
          "fontSize": 12,
          "letterSpacing": 1,
          "lineHeight": 14,
        },
      ]
    }
  >
   
  </Text>
</View>
`;

Snapshot with react-native-testing-library:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Component SubmitButton renders correctly 1`] = `
Object {
  "output": <ForwardRef
    disabled={false}
    onPress={[Function]}
  >
    <ForwardRef
      labelColor="#fff"
    >
      
    </ForwardRef>
  </ForwardRef>,
}
`;

As you can see, the snapshot spits out a bunch of ForwardRef components and doesn't list the CSS so the snapshot test only shows props passed to components and is not really useful.

Is there any additional setup I need here or do we need to add support for this in react-native-testing-library or styled-components?

[thymikee]

Looks like you snapshot shallow output. Try snapshot snpashotting render output. Although I don't recommend snpashotting components just like that, they're very prone to errors

[Ingibjorg]

@thymikee thanks for the advice. Using render gives me CSS. I used shallow because it's recommended in the API.md.

Shallowly renders given React component. Since it doesn't return helpers to query the output, it's mostly advised to used for snapshot testing (short snapshots are best for code reviewers).

Shouldn't that be removed then?

Also, how else would you recommend snapshotting components if you don't think this is the way to go?

[thymikee]

Ah, that's really misleading, yea. I'd recommend to used it only in pair with https://github.com/jest-community/snapshot-diff. Would you mind setting a PR? :)

[Ingibjorg]

Ah gotcha. I'll set up a PR. Thanks!