From 0fff9d9b023ba3f1354e58dabc97fb75ffe0e6ec Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 17 Dec 2019 11:46:25 -0800
Subject: [PATCH] Added more forwardRef test cases for DevTools

---
 .../react-devtools-shared/src/__tests__/store-test.js |  9 +++++++++
 .../src/app/ElementTypes/index.js                     | 11 ++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index b7a5021df0ae8..ccf1654bcbd97 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -856,6 +856,13 @@ describe('Store', () => {
 
     const MyComponent = (props, ref) => null;
     const FowardRefComponent = React.forwardRef(MyComponent);
+    const FowardRefComponentWithAnonymousFunction = React.forwardRef(() => (
+      <MyComponent />
+    ));
+    const FowardRefComponentWithCustomDisplayName = React.forwardRef(
+      MyComponent,
+    );
+    FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
     const MemoComponent = React.memo(MyComponent);
     const MemoForwardRefComponent = React.memo(FowardRefComponent);
     const LazyComponent = React.lazy(() => fakeImport(MyComponent));
@@ -864,6 +871,8 @@ describe('Store', () => {
       <React.Fragment>
         <MyComponent />
         <FowardRefComponent />
+        <FowardRefComponentWithAnonymousFunction />
+        <FowardRefComponentWithCustomDisplayName />
         <MemoComponent />
         <MemoForwardRefComponent />
         <React.Suspense fallback="Loading...">
diff --git a/packages/react-devtools-shell/src/app/ElementTypes/index.js b/packages/react-devtools-shell/src/app/ElementTypes/index.js
index b66d9eb9989fe..1b7bb0d32fc60 100644
--- a/packages/react-devtools-shell/src/app/ElementTypes/index.js
+++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js
@@ -35,9 +35,16 @@ function FunctionComponent() {
 
 const MemoFunctionComponent = memo(FunctionComponent);
 
-const ForwardRefComponent = forwardRef((props, ref) => (
+const FowardRefComponentWithAnonymousFunction = forwardRef((props, ref) => (
   <ClassComponent ref={ref} {...props} />
 ));
+const ForwardRefComponent = forwardRef(function NamedInnerFunction(props, ref) {
+  return <ClassComponent ref={ref} {...props} />;
+});
+const FowardRefComponentWithCustomDisplayName = forwardRef((props, ref) => (
+  <ClassComponent ref={ref} {...props} />
+));
+FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
 
 const LazyComponent = lazy(() =>
   Promise.resolve({
@@ -58,6 +65,8 @@ export default function ElementTypes() {
             <FunctionComponent />
             <MemoFunctionComponent />
             <ForwardRefComponent />
+            <FowardRefComponentWithAnonymousFunction />
+            <FowardRefComponentWithCustomDisplayName />
             <LazyComponent />
           </Suspense>
         </StrictMode>