Bug: React.forwardRef() wrapped component does not have it's static "displayName set by default

I was am using enzyme for testing and react-display-name within the testing environment. As seen by this code sandbox (https://codesandbox.io/s/vigorous-chatelet-qgwwd), the display name of a stateless functional component is the name of the function. The display name of a React.forwardRef() component class is “Unknown” while the instance has the display name “ForwardRef(<function name>)” . I would love it if the resulting object that represents the forward ref definition has the same static name as the instance.

React version: 16.12.0

Steps To Reproduce

Link to code example: https://codesandbox.io/s/vigorous-chatelet-qgwwd

The current behavior

Component display name = “Unknown” Instance display name = “ForwardRef(<function name>)”

The expected behavior

Component display name = “ForwardRef(<function name>)” Instance display name = “ForwardRef(<function name>)”

[bvaughn]

Perhaps that is a function of the enzyme method rather than the instance?

Yes. This sounds like Enzyme logic.

Here is what React does and what React DevTools does. Essentially:

1. If the forward ref itself has a displayName, use it as-is.
2. Else if the function passed to forwardRef() has a displayName, use it ¹.
3. Else use a fallback name (e.g. just forwardRef).

¹ React and DevTools differ a little on option 2 above. DevTools returns the inner function’s displayName as-is, but React wraps a ForwardRef(...) string around it. TBH I’m more a fan of the DevTools approach (big surprise).

That being said, in neither case does React auto-add a displayName property. Those are provided by the user, opt-in. It observes them if they’re there, and uses fallbacks if they aren’t.

[bvaughn]

Yup no problme.