enzyme-to-json
enzyme-to-json copied to clipboard
Passing styled-components as props results in large snapshots
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?
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):