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

enzyme-adapter-react-16 render wrong displayName for decorated react-redux component #2136

Closed
2 of 13 tasks
gustavovnicius opened this issue May 24, 2019 · 2 comments · Fixed by #2137
Closed
2 of 13 tasks
Assignees

Comments

@gustavovnicius
Copy link
Contributor

gustavovnicius commented May 24, 2019

Current behavior

For all my components currently decorated with connect, instead of getting the correct displayName in a snapshot, after bumping to the latest version of react-redux (hooks), the only thing I get is <ConnectFunction instead of <Connect(MyComponent).

By debugging a bit, I found out that this is happening due to how react-enzyme-adapter-16 and enzyme-adapter-utils extract the displayName, as you can see here:

https://github.com/airbnb/enzyme/blob/master/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js#L801

and here:

https://github.com/airbnb/enzyme/blob/master/packages/enzyme-adapter-utils/src/Utils.js#L120

This is the node data that gets passed:

{
  nodeType: 'function',
  type: {
    '$$typeof': Symbol(react.memo),
    type: [Function: ConnectFunction],
    compare: null,
    WrappedComponent: { [Function: MyComponent] defaultProps: [Object] },
    displayName: 'Connect(MyComponent)',
  },
  props: {
    // ...
  },
  key: undefined,
  ref: null,
  instance: null,
  rendered: null,
}

Expected behavior

It should check and extract the displayName from node.type if present, instead of getting node.type.type.name by default (React.memo).

I believe the correct implementation could be:
https://github.com/airbnb/enzyme/blob/master/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js#L806

case Memo || NaN: return nodeType.displayName || displayNameOfNode(type);

But not 100% sure about the side-effects that it might have.

Your environment

API

  • shallow
  • mount
  • render

Version

library version
enzyme 3.9.0
react 16.8.6
react-dom 16.8.6
react-test-renderer Not present
adapter (below)
react-redux 7.0.3

Adapter

  • enzyme-adapter-react-16
  • enzyme-adapter-react-16.3
  • enzyme-adapter-react-16.2
  • enzyme-adapter-react-16.1
  • enzyme-adapter-react-15
  • enzyme-adapter-react-15.4
  • enzyme-adapter-react-14
  • enzyme-adapter-react-13
  • enzyme-adapter-react-helper
  • others ( )
@ljharb
Copy link
Member

ljharb commented May 24, 2019

Thanks, I'll see if I can repro.

@gustavovnicius
Copy link
Contributor Author

@ljharb I've gone the extra mile, here: https://github.com/gustavovnicius/enzyme-display-name-bug

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 a pull request may close this issue.

2 participants