diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js index 37e445974a28..f2d559485b2c 100644 --- a/packages/react-devtools-shared/src/__tests__/utils-test.js +++ b/packages/react-devtools-shared/src/__tests__/utils-test.js @@ -7,7 +7,15 @@ * @flow */ -import {getDisplayName} from 'react-devtools-shared/src/utils'; +import { + getDisplayName, + getDisplayNameForReactElement, +} from 'react-devtools-shared/src/utils'; +import { + REACT_SUSPENSE_LIST_TYPE as SuspenseList, + REACT_STRICT_MODE_TYPE as StrictMode, +} from 'shared/ReactSymbols'; +import {createElement} from 'react/src/ReactElement'; describe('utils', () => { describe('getDisplayName', () => { @@ -37,4 +45,38 @@ describe('utils', () => { expect(getDisplayName(FauxComponent, 'Fallback')).toEqual('Fallback'); }); }); + describe('getDisplayNameForReactElement', () => { + it('should return correct display name for an element with function type', () => { + function FauxComponent() {} + FauxComponent.displayName = 'OverrideDisplayName'; + const element = createElement(FauxComponent); + expect(getDisplayNameForReactElement(element)).toEqual( + 'OverrideDisplayName', + ); + }); + it('should return correct display name for an element with a type of StrictMode', () => { + const element = createElement(StrictMode); + expect(getDisplayNameForReactElement(element)).toEqual('StrictMode'); + }); + it('should return correct display name for an element with a type of SuspenseList', () => { + const element = createElement(SuspenseList); + expect(getDisplayNameForReactElement(element)).toEqual('SuspenseList'); + }); + it('should return NotImplementedInDevtools for an element with invalid symbol type', () => { + const element = createElement(Symbol('foo')); + expect(getDisplayNameForReactElement(element)).toEqual( + 'NotImplementedInDevtools', + ); + }); + it('should return NotImplementedInDevtools for an element with invalid type', () => { + const element = createElement(true); + expect(getDisplayNameForReactElement(element)).toEqual( + 'NotImplementedInDevtools', + ); + }); + it('should return Element for null type', () => { + const element = createElement(); + expect(getDisplayNameForReactElement(element)).toEqual('Element'); + }); + }); }); diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 87f845105b52..b0b873cca163 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -22,6 +22,7 @@ import { StrictMode, Suspense, } from 'react-is'; +import {REACT_SUSPENSE_LIST_TYPE as SuspenseList} from 'shared/ReactSymbols'; import { TREE_OPERATION_ADD, TREE_OPERATION_REMOVE, @@ -43,7 +44,6 @@ import { } from 'react-devtools-shared/src/types'; import {localStorageGetItem, localStorageSetItem} from './storage'; import {meta} from './hydration'; - import type {ComponentFilter, ElementType} from './types'; const cachedDisplayNames: WeakMap = new WeakMap(); @@ -489,12 +489,16 @@ export function getDisplayNameForReactElement( return 'StrictMode'; case Suspense: return 'Suspense'; + case SuspenseList: + return 'SuspenseList'; default: const {type} = element; if (typeof type === 'string') { return type; - } else if (type != null) { + } else if (typeof type === 'function') { return getDisplayName(type, 'Anonymous'); + } else if (type != null) { + return 'NotImplementedInDevtools'; } else { return 'Element'; } diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js index bac0db1a880f..2f132ba5de9a 100644 --- a/packages/react-is/src/ReactIs.js +++ b/packages/react-is/src/ReactIs.js @@ -21,6 +21,7 @@ import { REACT_PROVIDER_TYPE, REACT_STRICT_MODE_TYPE, REACT_SUSPENSE_TYPE, + REACT_SUSPENSE_LIST_TYPE, } from 'shared/ReactSymbols'; import isValidElementType from 'shared/isValidElementType'; @@ -36,6 +37,7 @@ export function typeOf(object: any) { case REACT_PROFILER_TYPE: case REACT_STRICT_MODE_TYPE: case REACT_SUSPENSE_TYPE: + case REACT_SUSPENSE_LIST_TYPE: return type; default: const $$typeofType = type && type.$$typeof;