Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Snapshot tests showing components as '<ForwardRef />' instead of component name

See original GitHub issue

emotion version:

"@emotion/core": "^10.0.6",
"@emotion/native": "^10.0.6",

react version:

"react": "16.6.3",
"react-native": "0.57.8",

Relevant code:

const StyledText = styled.Text<StyledTextProps>`
  ${space}
  ${textType}
  ${textAlign}
  ${textColor}
`;

StyledText.defaultProps = {
  type: 'default',
};

StyledText.displayName = 'StyledText';

What you did: Used the StyledText component I just created in another component and did a snapshot test.

What happened: I expected the name in the snapshots to show up as <StyledText ...> but it showed up as <ForwardRef ...> instead.

Suggested solution: The displayName should be honoured when created styled components like this, or at least there should be an API to provide that name to emotion.

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:18 (12 by maintainers)

Top GitHub Comments

2reactions

jooj123commented, Mar 13, 2019

Got around this by not applying @emotion/babel-preset-css-prop specifically for test babel config, eg:

process.env.NODE_ENV === 'test'
        ? null
        : [
            // see: https://emotion.sh/docs/@emotion/babel-preset-css-prop
            require.resolve('@emotion/babel-preset-css-prop'),
            {
              sourceMap: true,
              autoLabel: false,
              cssPropOptimization: true,
            },
          ],

But yeah maybe not the best way - ideally should work out of the box

1reaction

danieldelcorecommented, Mar 24, 2019

Hi all, this might be have been fixed in this pr: https://github.com/emotion-js/emotion/pull/1280 We just merged it, so it might be a couple of days until it’s released.

@mitchellhamilton how often do you cut new releases?