API for display name on forwardRef, memo and potential future exotic components

[eps1lon]

TL;DR: Can you expose shared/getComponentName?

Do you want to request a feature or report a bug?
Expose an API to get the display name of every component (in __DEV__ only).

What is the current behavior?
Most of the ecosystem still uses Component.displayName || Component.name || someFallbackName
(with some branching depending on the type of Component) when setting the display name of an enhanced component i.e. connect()(WrappedComponent) will result in "connect(WrappedComponent)" as a displayName.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
Since components created by forwardRef or memo are not actual functions these higher-order components are not able to determine a proper display name while react-devtools is able to:

https://codesandbox.io/s/zqj9v50243

• react-redux creates "connect(Component)"
• react-router creates "withRouter(undefined)"

What is the expected behavior?
The new "exotic-components" should work with the existing 3rd party libraries WRT to displayName.

Now there are a couple of solutions to this issue:

1. Edit: Expose shared/getComponentName
2. This is the responsibility of the ecosystem. It should provide a solution and maintain it. Somewhat blocked by ReactIs.typeOf for non-elements #12882, related: [react-is] Add elementType API #12932
3. Grant access to the functionality used in react-devtools (or would this only work on the fibers?)
4. Set a name (or displayName no preference here) property on those "exotic-components" (don't know how to call them). Naive implementation e.g.: name: 'ForwardRef(' + fn.name + ')'.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I guess this started with forwardRef in 16.3.

[martinmckenna]

+1 here. My current solution to smoke testing React.memo components is to add a custom attribute such as

qa-my-child-component

and then with jest-enzyme

shallow(<MyComponent />).find('[qa-my-child-component]').toHaveLength(1).

Ideally, I'd like to do

shallow(<MyComponent />).find('MyChildComponent')

[jquense]

forwardRef does use the inner function name as the displayName, e.g. ForwardRef(InnerName)

[eps1lon]

@jquense In what version? It has a display name in react-devtools but no actual property displayName.

[hronro]

Any updates?

[eps1lon]

@foisonocean Upvote the issue, subscribe and wait for updates. Asking for updates is just noise for other people watching for updates.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!