Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tweak how displayName is read in the shallow printer #2336

Merged
merged 2 commits into from
Apr 8, 2021

Conversation

iChenLei
Copy link
Contributor

@iChenLei iChenLei commented Apr 8, 2021

What: fix #2321

Why: not necessary, just a patch fix.

How: add displayName to support better jest-test UX

Checklist:

  • Documentation
  • Tests
  • Code complete
  • Changeset

@fffed report a issue abount enzyme-serializer returns undefined at issue 2321.

exports[`enzyme shallow styled with css 1`] = `
.emotion-0 {
  background-color: black;
}

<div>
  <undefined
    className="emotion-0"
  >
    Test button
  </undefined>
</div>
`;

Then I try to debug emotion-js source code, and found why the serializer return a undefined!

2021-04-08 10 50 18

noticed that emotionType not always be a string or a normal react component, it can be a forward component, React.forwardRef has displayName but no name

2021-04-08 11 06 45

How to fix it ?

- typeof emotionType === 'string' ? emotionType : emotionType.name
+ typeof emotionType === 'string'
+   ? emotionType
+   : emotionType.name || emotionType.displayName

Now the jest unit test snapshot be more hunman readable.

exports[`enzyme shallow styled with css prop 1`] = `
.emotion-0 {
  background-color: black;
}

<div>
  <Button
    className="emotion-0"
  >
    iChenLei
  </Button>
</div>
`;

Hope emotion maintainer can code review this PR, thanks ! /cc @mitchellhamilton @Andarist

@changeset-bot
Copy link

changeset-bot bot commented Apr 8, 2021

🦋 Changeset detected

Latest commit: b3bdf84

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@emotion/jest Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 8, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b3bdf84:

Sandbox Source
Emotion Configuration
Emotion issue template Issue #2321

@iChenLei iChenLei changed the title use emotionType.displayName to support shallowEnzymeElement with react forwardRef Tweak how displayName is read in the shallow printer Apr 8, 2021
@Andarist Andarist force-pushed the enzyme-serializer-bug branch from 842cdad to b3bdf84 Compare April 8, 2021 09:54
@Andarist Andarist merged commit 4e911ed into emotion-js:master Apr 8, 2021
This was referenced Apr 8, 2021
@iChenLei iChenLei deleted the enzyme-serializer-bug branch September 10, 2023 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

enzyme-serializer returns undefined
2 participants