[React] Add guidelines for setting displayName on higher-order components

Higher-order components are functions that take a Component as an argument and return a new Component that renders the passed-in Component. When doing this, it is nice to set the displayName on the generated Component to make it obvious (e.g. in dev tools) to understand what is going on. I prefer the convention of higherOrderComponent(WrappedComponent).

For example, if I have a higher-order component called withFoo and a component that is wrapped by this called Bar:

export default withFoo(Bar);

the displayName on the generated component would be set to withFoo(Bar), e.g.:

export default function withFoo(Component) {
  function WithFoo(props) {
    // TODO: do something special here.
    return <Component {...this.props} />;
  }

  WithFoo.displayName = `withFoo(${Component.displayName || Component.name}`;
  return WithFoo;
}

[lencioni]

Related: https://github.com/airbnb/react-with-styles/issues/32#issuecomment-255425391

It is best to use wrapper.find() with a reference to the component instead of a string that describes the component (e.g. wrapper.find(MyComponent), not wrapper.find("MyComponent")). This will solve this problem for you when using any HOC, while also avoiding accidentally finding a different component than the one you expected that may have the same name.

For testing the underlying component with Enzyme, you probably want to use .dive().

I hope that helps! Let me know if you have any questions.

[jeffcarbs]

Cool, thanks for the response!