enzyme-to-json icon indicating copy to clipboard operation
enzyme-to-json copied to clipboard

Passing styled-components as props results in large snapshots

Open jwld opened this issue 6 years ago • 1 comments

Happens when passing components created using the styled-components library as props.

For example:

<FieldWrap
  meta={Object {}}
  wrapper={
    Object {
      "$$typeof": Symbol(react.forward_ref),
      "attrs": Array [],
      "componentStyle": ComponentStyle {
        "componentId": "DefaultWrapper-sc-15lfxc7-0",
        "isStatic": true,
        "rules": Array [
          "align-items:center;display:flex;flex-direction:column;justify-content:flex-start;",
          ";",
        ],
      },
      "displayName": "DefaultWrapper",
      "foldedComponentIds": Array [],
      "render": [Function],
      "styledComponentId": "DefaultWrapper-sc-15lfxc7-0",
      "target": "div",
      "toString": [Function],
      "warnTooManyClasses": [Function],
      "withComponent": [Function],
    }
  }
>

This also has the nasty side effect of requiring a snapshot update whenever any of the styling rules on the prop being passed are changed. Would be nice if it just said Object {} instead!

Is there any way around this?

jwld avatar Feb 18 '19 13:02 jwld

Just for a bit more context, I noticed this became a problem on another project once I updated styled-components to v4, which seems to change the prop from a function to an object (this is the snapshot):

Screenshot 2019-03-14 at 13 25 32

jwld avatar Mar 14 '19 13:03 jwld