profile
viewpoint

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

<!-- Thanks for your interest in the project. I appreciate bugs filed and PRs submitted! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Please fill out this template with all the relevant information so we can understand what's going on and fix the issue.

I'll probably ask you to submit the fix (after giving some direction). If you've never done that before, that's great! Check this free short video tutorial to learn how: http://kcd.im/pull-request -->

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

emotion-js/emotion

Answer questions drainpip

Just to mirror those here, I am having the same problem, but not in React Native.

We're running 10.0.7 of @emotion/core, jest-emotion, and babel-plugin-emotion. This isn't a full blocker for us, however it does make testing for DOM elements and copy difficult.

Edit -

This was only happening to us in a file using Enzyme's shallow renderer. It's also slightly outdated so I'm going to attempt to upgrade that along with some other deps and will report back.

useful!

Related questions

Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 2
Component selectors not working with `@emotion/babel-preset-css-prop` hot 2
How to use babel-emotion-plugin with Storybook + Typescript? hot 1
Using emotion 9 and 10 in the same window hot 1
Emotion 10 - "React is not defined" hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Problems surrounding SSR injection of <style> and unreliability of :first-child selectors hot 1
Typescript definitions for @emotion/native hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
&:focus not working hot 1
regexp not work in IE hot 1
transpile typescript to babel-plugin-emotion doesn't work hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Github User Rank List