fix: Show forwarded component name

Author: Andrei Toma

package.json

@@ -24,10 +24,7 @@
     "smoke": "node tests/smoke/run"
   },
   "lint-staged": {
-    "*.js": [
-      "prettier --write \"**/*.{js,json}\"",
-      "git add"
-    ]
+    "*.js": ["prettier --write \"**/*.{js,json}\"", "git add"]
   },
   "author": {
     "name": "Algolia, Inc.",
@@ -84,11 +81,10 @@
   },
   "dependencies": {
     "@base2/pretty-print-object": "1.0.0",
-    "is-plain-object": "3.0.0"
+    "is-plain-object": "3.0.0",
+    "react-is": "^16.13.1"
   },
   "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>tests/setupTests.js"
-    ]
+    "setupFilesAfterEnv": ["<rootDir>tests/setupTests.js"]
   }
 }

src/index.spec.js

@@ -57,6 +57,27 @@ describe('reactElementToJSXString(ReactElement)', () => {
     delete AnonymousStatelessComponent.displayName;
   });
 
+  it('reactElementToJSXString forwardRef with a displayName', () => {
+    const createReactComponent = tagName => {
+      const createForwardRef = ReactComponent => {
+        const forwardRef = (props, ref) => {
+          return <ReactComponent {...props} forwardedRef={ref} />;
+        };
+        forwardRef.displayName = tagName;
+
+        return React.forwardRef(forwardRef);
+      };
+
+      return createForwardRef(React.createElement(tagName));
+    };
+
+    const MyComponent = createReactComponent('my-component');
+
+    expect(reactElementToJSXString(<MyComponent />)).toEqual(
+      '<my-component />'
+    );
+  });
+
   it("reactElementToJSXString(React.createElement('div'))", () => {
     expect(reactElementToJSXString(React.createElement('div'))).toEqual(
       '<div />'

src/parser/parseReactElement.js

@@ -2,6 +2,7 @@
 
 import React, { type Element as ReactElement, Fragment } from 'react';
 import type { Options } from './../options';
+import * as ReactIs from 'react-is';
 import {
   createStringTreeNode,
   createNumberTreeNode,
@@ -12,12 +13,16 @@ import type { TreeNode } from './../tree';
 
 const supportFragment = Boolean(Fragment);
 
-const getReactElementDisplayName = (element: ReactElement<*>): string =>
-  element.type.displayName ||
-  (element.type.name !== '_default' ? element.type.name : null) || // function name
-  (typeof element.type === 'function' // function without a name, you should provide one
-    ? 'No Display Name'
-    : element.type);
+const getReactElementDisplayName = (element: ReactElement<*>): string => {
+  return (
+    element.type.displayName ||
+    (element.type.name !== '_default' ? element.type.name : null) || // function name
+    (ReactIs.isForwardRef(element) ? element.type.render.displayName : null) ||
+    (typeof element.type === 'function' // function without a name, you should provide one
+      ? 'No Display Name'
+      : element.type)
+  );
+};
 
 const noChildren = (propsValue, propName) => propName !== 'children';
 

yarn.lock

@@ -7298,6 +7298,11 @@ react-is@^16.12.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-is@^16.5.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3"