Missing displayName for styled-component 4.x and enzyme-to-json

For latest styled-component v4 and latest enzyme version, in test cases, if we pass the Component Instance on props, when make snapshots by enzyme-to-json and enzyme-adapter-react-16, the displayName will missing.

For the styled-component 3.x version, it works well for same enzyme version. Only happens for the new styled-component 4.x version.

There is a relevant issue of styled-component v4, https://github.com/styled-components/styled-components/issues/1985

Please help check and give some proper fixing, thanks!

Used enzyme@3.9.0, styled-components@4.2, enzyme-adapter-react-16@1.12.1, enzynme-to-json@3.3.5, and setup "enzyme-to-json/serializer" for snapshotSerializers.

Here are the code sample

it('render small app', () => {
        const result = shallow(
            <SmallApp
                company="Supercell"
                i18n={mockI18n}
            />
        );
        expect(result).toMatchSnapshot();
    });

The simple version of SmallApp is

class SmallApp extends React.PureComponent<{
    name?: string | React.Node,
}> {
    render() {
        const {
            name,

        } = this.props;


        let nameEl;
        if (name == null) {
            nameEl = <div />;
        } else {
            nameEl = (
                <Text ellipsis style={{ color: colors.brand.bigStone }}>
                    {name}
                </Text>
            );
        }
        return (
            <SmallEntity name={nameEl}/>
        );
    }
}

The Text component is styled component,

const Text = styled.div`
    color: inherit;
    text-overflow: ${(props: TextProps) => (props.ellipsis ? 'ellipsis' : 'inherit')};
    overflow: ${(props: TextProps) => (props.ellipsis ? 'hidden' : 'inherit')};
`;

Current behavior

Shallow or mount styled-component Component would get <ForwardRef > and <StyledComponent> instead of its correct displayName.

<SmallEntity
  company="Supercell"
  name={
    <ForwardRef
      style={
        Object {
      }
    >
      Supercell
    </ForwardRef>
  }
/>

Expected behavior

Should get correct displayName in snapshots, not the ForwardRef, expected behavior should be like this, name={<Text ...

<SmallEntity
  company="Supercell"
  name={
    <Text
      style={
        Object {
      }
    >
      Supercell
    </Text>
  }
/>

Your environment

Jest+Enzyme+enzyme-to-json+styled-components

Used enzyme@3.9.0, styled-components@4.2, enzyme-adapter-react-16@1.12.1, enzynme-to-json@3.3.5, and setup "enzyme-to-json/serializer" for snapshotSerializers.

API

• shallow
• mount

Version

library	version
enzyme	3.8.0
react	16.7.0
react-dom	16.7.0
react-test-renderer
adapter (below)

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[xunuoi]

Seems this should be the bug of styled-component v4, I created one fixing PR for this, https://github.com/styled-components/styled-components/pull/2516

Still appreciate the enzyme team would have a double check for this issue, if nothing about enzyme, we should close this issue? Thanks ^ ^

[ljharb]

@XxX-MLGNoob-XxX you’re using enzyme’s debug, which shows the actual component tree - which in this case, due to styled-components’ implementation, includes all those extra divs and components. In other words, .debug() is not meant to be some kind of snapshot of the jsx you typed, it’s a formatted version of the actual react tree.