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

[hammadj]

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

[kylegach]

Are you sure that babel-plugin-emotion is running in your test environment?

If you're unable to do that, you can also manually add a label to your components.

[hammadj]

@kylegach Doesn't work even with babel-plugin-emotion. I don't think thats applicable to React Native anyways since there is no classes or classNames.

[Iuriy-Budnikov]

I have the same issue

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

[jooj123]

Yeah we have the same issue with enzyme (shallow render) + mocha (so its not just jest related)

Have some jsx:

<h1 css={styles.cityHeading}>Sydney</h1>

Cant target with:

expect(wrapper.find('h1')).to.have.text(
  'Sydney'
);

Because @emotion/babel-preset-css-prop converts to:

<ForwardRef(render) 
  css={{...}} __EMOTION_TYPE_PLEASE_DO_NOT_USE__="h1" 
  __EMOTION_LABEL_PLEASE_DO_NOT_USE__="EmotionTest">
  Sydney
</ForwardRef(render)>

Converting to mount works around the issue - but its not ideal for all our tests to be mount tests

[ar7casper]

Any updates on that?
Having similar issues, across the board (Storybook, Jest, etc.)
Works fine with a pure function, trying out styled resulted in these problems.

I'm using the jsx pragma with TypeScript, no Babel installed.

[jooj123]

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

[frankishh]

Yeah we have the same issue with enzyme (shallow render) + mocha (so its not just jest related)

Have some jsx:

<h1 css={styles.cityHeading}>Sydney</h1>

Cant target with:

expect(wrapper.find('h1')).to.have.text(
  'Sydney'
);

Because @emotion/babel-preset-css-prop converts to:

<ForwardRef(render) 
  css={{...}} __EMOTION_TYPE_PLEASE_DO_NOT_USE__="h1" 
  __EMOTION_LABEL_PLEASE_DO_NOT_USE__="EmotionTest">
  Sydney
</ForwardRef(render)>

Converting to mount works around the issue - but its not ideal for all our tests to be mount tests

Have the exactly same issue with you @jooj123

[danieldelcore]

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?

[mitchellhamilton]

I'll probably do a release later today.

[mitchellhamilton]

Done.

[danieldelcore]

Excellent! Thanks Mitch 😊

[jooj123]

@danieldelcore @mitchellhamilton im not 100% across the code change - seems this will only work for jest emotion is that correct?
I can only see jest emotion plugin changes (im not using jest - using mocha)

[drainpip]

Hi all, this might be have been fixed in this pr: #1280 We just merged it, so it might be a couple of days until it's released.

After a quick test and naive update to 10.0.10 (except [email protected]), the <ForwardRef> stuff does indeed go away, but it's replaced with css="unknown styles". I'll keep digging in and report back if I find what I did wrong (if anything).

[danieldelcore]

Sweet! Yes that is intentional because the styles haven’t been mounted yet 😊

[drainpip]

Sweet! Yes that is intentional because the styles haven’t been mounted yet

OK, that's interesting because behavior in v9 was quite different. We were able to get the names of the classes being used and write tests against them. If this is the intended behavior I'll have to revisit things from a different angle.

[Andarist]

Seems like this has been fixed by #1280 so I'm going to close this issue. If you still have any problems with emotion - please just open a new issue.

[jooj123]

@Andarist its only fixed for users of jest-emotion ? Is there a mocha solution that you know of ?
Not sure forcing users to use jest is a solution 100% of time