From 29ed88bad5abf01a117756a1dc22ece02c88e326 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacob.thornton@coinbase.com>
Date: Sat, 21 Mar 2020 21:21:39 -0700
Subject: [PATCH] Fix: forward ref

---
 package.json                    | 12 ++++--------
 src/index.spec.js               | 21 +++++++++++++++++++++
 src/parser/parseReactElement.js | 17 +++++++++++------
 yarn.lock                       |  5 +++++
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index c5321eeaf..68a6cc8aa 100644
--- a/package.json
+++ b/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"]
   }
 }
diff --git a/src/index.spec.js b/src/index.spec.js
index a88060855..3cdc78d2a 100644
--- a/src/index.spec.js
+++ b/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 />'
diff --git a/src/parser/parseReactElement.js b/src/parser/parseReactElement.js
index 773b1a98d..148b21813 100644
--- a/src/parser/parseReactElement.js
+++ b/src/parser/parseReactElement.js
@@ -9,15 +9,20 @@ import {
   createReactFragmentTreeNode,
 } from './../tree';
 import type { TreeNode } from './../tree';
+import * as ReactIs from 'react-is';
 
 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';
 
diff --git a/yarn.lock b/yarn.lock
index 8d4130887..6886dd890 100644
--- a/yarn.lock
+++ b/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"