Missing displayName for styled-component 4.xx

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 get 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. So the new changes on 4.x caused this issue, but not sure which part should fix it.

There is a relevant issue I created on enzyme, https://github.com/airbnb/enzyme/issues/2090

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 ( )

[vabole]

displayName is still missing with: styled-components: 4.3.2 react 16.9.0 react-dom: 16.9.0

[probablyup]

@xunuoi this is likely caused by the usage of React.forwardRef in v4+… enzyme has had a lot of issues with that API unfortunately. I’d recommend deep-mounting your tree and just mocking out the components that you don’t want to mount that fetch data, etc.