diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js index 6716766b27..73df17071b 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js @@ -229,7 +229,7 @@ describe('commit tree', () => { ▾ [suspense-root] rects={null} - + `); utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` @@ -238,7 +238,7 @@ describe('commit tree', () => { ▾ [suspense-root] rects={null} - + `); utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` @@ -304,7 +304,7 @@ describe('commit tree', () => { ▾ [suspense-root] rects={null} - + `); utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index e6eddff840..fad4622acc 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -493,7 +493,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]} - + `); await act(() => { @@ -506,7 +506,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]} - + `); }); @@ -1054,7 +1054,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]} - + `); await act(() => { @@ -1069,7 +1069,7 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]} - + `); }); @@ -1407,7 +1407,7 @@ describe('Store', () => { [root] ▸ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]} - + `); // This test isn't meaningful unless we expand the suspended tree @@ -1424,7 +1424,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]} - + `); await act(() => { @@ -1437,7 +1437,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]} - + `); }); @@ -1663,7 +1663,7 @@ describe('Store', () => { [root] ▸ [suspense-root] rects={null} - + `); await act(() => @@ -1678,7 +1678,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); const rendererID = getRendererID(); @@ -1697,7 +1697,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); await act(() => @@ -1713,7 +1713,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); }); }); @@ -2018,7 +2018,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); await Promise.resolve(); @@ -2032,7 +2032,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); // Render again to unmount it @@ -2523,7 +2523,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); await actAsync(() => render()); @@ -2534,7 +2534,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); }); }); diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js index 6f382f976c..9b6b7e7ab0 100644 --- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js @@ -1369,8 +1369,8 @@ describe('TreeListContext', () => { ▾ [suspense-root] rects={null} - - + + `); const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number); @@ -1411,8 +1411,8 @@ describe('TreeListContext', () => { ▾ [suspense-root] rects={null} - - + + `); }); }); diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 02e60a080a..310321b5ff 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -1950,14 +1950,13 @@ export default class Store extends EventEmitter<{ throw error; } - _guessSuspenseName(element: Element): string | null { - // TODO: Use key + _guessSuspenseName(element: Element): string { const owner = this._idToElement.get(element.ownerID); - if (owner !== undefined) { - // TODO: This is clowny - return `${owner.displayName || 'Unknown'}>?`; + let name = 'Unknown'; + if (owner !== undefined && owner.displayName !== null) { + name = owner.displayName; } - return null; + return name; } }