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

[xunuoi]

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, styled-components/styled-components#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 ( )

[ljharb]

enzyme does not support or encourage snapshot testing.

What does wrapper.debug() print out? That's the closest thing we have.

[xunuoi]

@ljharb Hi thanks for your response. It shows same things. I guess the enzyme-to-json just printed out the wrapper.debug()

Could you help dig deeper for this ? If you consider it as an issue

[ljharb]

I believe this will be fixed in the next release of enzyme.

[xunuoi]

Seems this should be the bug of styled-component v4, I created one fixing PR for this, styled-components/styled-components#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]

v3.10.0 has now been released.

Closing; happy to reopen if it's not resolved.

[ITenthusiasm]

@ljharb I still seem to be having a problem. I have a repo intended to demo the issue here. Just install everything and run npm run test.

My console output shows:

<TestComponent>
  <styled.div>
    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
      <div className="sc-bdVaJa ldwqup">
        <styled.input>
          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
            <input className="sc-bwzfXH fnzDhn" />
          </StyledComponent>
        </styled.input>
      </div>
    </StyledComponent>
  </styled.div>
</TestComponent>

But I was expecting something more along the lines of:

<TestComponent>
  <ExampleWrapper>
    <Example />
  </ExampleWrapper>
</TestComponent>

Versions:

• styled-components: 4.4.1
• enzyme: 3.11.0
• enzyme-adapter-react-16: 1.15.2

Is it possible that this is an enzyme issue? Or do you think this is on styled-component's end?

[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.