Added more forwardRef test cases for DevTools (#17642)

facebook · Dec 17, 2019 · e84327b · e84327b
1 parent 4b0cdf2
commit e84327b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
@@ -618,6 +618,9 @@ exports[`Store should show the right display names for special component types 1
   ▾ <App>
       <MyComponent>
       <MyComponent> [ForwardRef]
+    ▾ <Anonymous> [ForwardRef]
+        <MyComponent>
+      <Custom> [ForwardRef]
       <MyComponent> [Memo]
     ▾ <MyComponent> [Memo]
         <MyComponent> [ForwardRef]

diff --git 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
@@ -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>