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

name() returned for mount nodes don't match memo() components #2341

Closed
2 of 4 tasks
TrevorBurnham opened this issue Feb 24, 2020 · 3 comments
Closed
2 of 4 tasks

name() returned for mount nodes don't match memo() components #2341

TrevorBurnham opened this issue Feb 24, 2020 · 3 comments

Comments

@TrevorBurnham
Copy link

Very similar to #2332

Current behavior

The name() returned for memo()-wrapped components with defaultProps doesn't match the component's displayName itself in mount mode, and find calls using that name don't match those nodes.

Expected behavior

For a node that corresponds to an instance of a memo() component, name() should match the component's displayName, and find(MemoComponent.displayName) should match those nodes.

Your environment

Try this: https://codesandbox.io/s/enzyme-memo-name-bug-435hq

API

  • shallow
  • mount
  • render

Version

library version
enzyme 3.11.0
react 16.12.0
react-dom 16.12.0
adapter (below) 1.15.2

Adapter

  • enzyme-adapter-react-16
@ljharb
Copy link
Member

ljharb commented Feb 24, 2020

You're passing an arrow function (thus unnamed) component into memo which is obscuring the issue; in https://codesandbox.io/s/enzyme-memo-name-bug-vsflz, it's using a named function component, and you can see that the memo is automatically being unwrapped, and the memoized component is what you're interacting with.

The difference here is between mount and shallow - mount wraps what you pass to it, but shallow wraps what the thing renders - and mount punches through memo automatically by virtue of deeply rendering.

In other words, this is correct behavior, albeit confusing.

If you compare this behavior to how actual React behaves, with the dev tools extension, I believe (but I might be wrong!) that the displayName property on memo is ignored, and that only the memoized component's name matters.

I'll close this for now, but will reopen and fix if I'm wrong about how memo's displayName works.

@ljharb ljharb closed this as completed Feb 24, 2020
@TrevorBurnham
Copy link
Author

TrevorBurnham commented Feb 25, 2020

It looks like you're right: This is a quirk of React, not Enzyme. 😞

Actually, searching the issue tracker there, it looks like a fix was merged just a few days ago: mui/material-ui#19762 😀 Whoops, that PR is a workaround for the material-ui library. Very much still an open bug in React: facebook/react#15207 😭

@ljharb
Copy link
Member

ljharb commented Feb 25, 2020

If that bug gets resolved, please do ping me here, and i'll reopen and fix it :-)

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

No branches or pull requests

2 participants