Merge pull request #185 from seznam/select-display-name

fix: displayName of components wrapped with select

Author: mjancarik

.changeset/kind-cups-change.md

@@ -0,0 +1,5 @@
+---
+"@ima/plugin-select": patch
+---
+
+Fix displayName value for components wrapped with `select` HOC. This should resolve the issue with `Component.displayName` being `withContext(undefined)`.

packages/plugin-select/src/select/__tests__/SelectSpec.js

@@ -1,5 +1,5 @@
 import { getContextValue, renderWithContext } from '@ima/testing-library';
-import { PureComponent, createRef } from 'react';
+import { PureComponent, createRef, memo, forwardRef } from 'react';
 
 import forwardedSelect, {
   createStateSelector,
@@ -159,6 +159,37 @@ describe('plugin-select:', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
+    it('should set displayName for class component', async () => {
+      const EnhancedComponent = select(...selectorMethods)(Component);
+
+      expect(EnhancedComponent.displayName).toBe('withContext(Component)');
+    });
+
+    it('should set displayName for functional component', async () => {
+      const FunctionalComponent = () => {
+        return <div />;
+      };
+      const EnhancedComponent = select(...selectorMethods)(FunctionalComponent);
+
+      expect(EnhancedComponent.displayName).toBe(
+        'withContext(FunctionalComponent)'
+      );
+    });
+
+    it('should set displayName for memoized component', async () => {
+      const MemoComponent = memo(Component);
+      const EnhancedComponent = select(...selectorMethods)(MemoComponent);
+
+      expect(EnhancedComponent.displayName).toBe('withContext(Component)');
+    });
+
+    it('should set displayName for forwarded component', async () => {
+      const ForwardedComponent = forwardRef(Component);
+      const EnhancedComponent = select(...selectorMethods)(ForwardedComponent);
+
+      expect(EnhancedComponent.displayName).toBe('withContext(Component)');
+    });
+
     it('should render component with extraProps modifies by ownProps', async () => {
       let EnhancedComponent = select(
         ...selectorMethods,

packages/plugin-select/src/select/select.jsx

@@ -51,7 +51,7 @@ export function select(...selectors) {
       return <Component {...restProps} {...state} ref={forwardedRef} />;
     };
 
-    const componentName = Component.displayName || Component.name;
+    const componentName = getReactComponentName(Component);
     WithContext.displayName = `withContext(${componentName})`;
     hoistStaticMethod(WithContext, Component);
 
@@ -120,7 +120,7 @@ export default function forwardedSelect(...selectors) {
       return <SelectState {...props} forwardedRef={ref} />;
     };
 
-    const name = Component.displayName || Component.name;
+    const name = getReactComponentName(Component);
     forwardRef.displayName = `select(${name})`;
 
     return hoistStaticMethod(reactForwardRef(forwardRef), Component);
@@ -179,3 +179,18 @@ export function createStateSelector(...selectors) {
 
   return createSelector(derivedState, passStateOnChange);
 }
+
+/**
+ * Finds display name from the provided component.
+ * @param {Function|Object} Component
+ * @returns {string}
+ */
+function getReactComponentName(Component) {
+  return Component.displayName ||
+    Component.name ||
+    Component.type?.displayName || // React.memo
+    Component.type?.name ||
+    Component.render?.displayName || // React.forwardRef
+    Component.render?.name ||
+    'Component';
+}