Added a DevTools store test for component names

Author: Brian Vaughn

packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap

@@ -612,3 +612,15 @@ exports[`Store should properly serialize non-string key values: 1: mount 1`] = `
 [root]
     <Child key="123">
 `;
+
+exports[`Store should show the right display names for special component types 1`] = `
+[root]
+  ▾ <App>
+      <MyComponent>
+      <MyComponent> [ForwardRef]
+      <MyComponent> [Memo]
+    ▾ <MyComponent> [Memo]
+        <MyComponent> [ForwardRef]
+    ▾ <Suspense>
+        <MyComponent>
+`;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -848,4 +848,52 @@ describe('Store', () => {
     act(() => ReactDOM.render([fauxElement], document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
   });
+
+  it('should show the right display names for special component types', async done => {
+    async function fakeImport(result) {
+      return {default: result};
+    }
+
+    const MyComponent = (props, ref) => null;
+    const FowardRefComponent = React.forwardRef(MyComponent);
+    const MemoComponent = React.memo(MyComponent);
+    const MemoForwardRefComponent = React.memo(FowardRefComponent);
+    const LazyComponent = React.lazy(() => fakeImport(MyComponent));
+
+    const App = () => (
+      <React.Fragment>
+        <MyComponent />
+        <FowardRefComponent />
+        <MemoComponent />
+        <MemoForwardRefComponent />
+        <React.Suspense fallback="Loading...">
+          <LazyComponent />
+        </React.Suspense>
+      </React.Fragment>
+    );
+
+    const container = document.createElement('div');
+
+    // Render once to start fetching the lazy component
+    act(() =>
+      ReactDOM.render(
+        <App />,
+        container,
+      ),
+    );
+
+    await Promise.resolve();
+
+    // Render again after it resolves
+    act(() =>
+      ReactDOM.render(
+        <App />,
+        container,
+      ),
+    );
+
+    expect(store).toMatchSnapshot();
+
+    done();
+  });
 });

packages/react-devtools-shared/src/devtools/utils.js

@@ -7,6 +7,11 @@
  * @flow
  */
 
+import {
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
+
 import type {Element} from './views/Components/types';
 import type Store from './store';
 
@@ -21,10 +26,25 @@ export function printElement(element: Element, includeWeight: boolean = false) {
     key = ` key="${element.key}"`;
   }
 
-  let hocs = '';
+  let hocDisplayNames = null;
   if (element.hocDisplayNames !== null) {
-    hocs = ` [${element.hocDisplayNames.join('][')}]`;
+    hocDisplayNames = [...element.hocDisplayNames];
   }
+  if (element.type === ElementTypeMemo) {
+    if (hocDisplayNames === null) {
+      hocDisplayNames = ['Memo'];
+    } else {
+      hocDisplayNames.push('Memo');
+    }
+  } else if (element.type === ElementTypeForwardRef) {
+    if (hocDisplayNames === null) {
+      hocDisplayNames = ['ForwardRef'];
+    } else {
+      hocDisplayNames.push('ForwardRef');
+    }
+  }
+
+  let hocs = hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;
 
   let suffix = '';
   if (includeWeight) {