{"commit":{"authorEmail":"rdlesyutin@gmail.com","authoredAt":"2024-02-06T11:24:54+00:00","subject":"chore: use versioned render in profilingCache test (#28242)","shortRevision":"cb78d2f1f3","authorName":"Ruslan Lesiutin","revision":"cb78d2f1f3a09dcacf730273a584c769f69c47b3"},"parents":["0a53c465743264d3b0544f4579f26c7b4a8053fb"],"files":[{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/profilingCache-test.js"}],"body":"","patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/profilingCache-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/profilingCache-test.js\nindex aefc8d5e07..db19dbf3be 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/profilingCache-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/profilingCache-test.js\n@@ -10,6 +10,8 @@\n import type {FrontendBridge} from 'react-devtools-shared\/src\/bridge';\n import type Store from 'react-devtools-shared\/src\/devtools\/store';\n \n+import {getVersionedRenderImplementation} from '.\/utils';\n+\n describe('ProfilingCache', () => {\n let PropTypes;\n let React;\n@@ -39,8 +41,11 @@ describe('ProfilingCache', () => {\n Scheduler = require('scheduler');\n });\n \n+ const {render, getContainer} = getVersionedRenderImplementation();\n+\n \/\/ @reactVersion >= 16.9\n- it('should collect data for each root (including ones added or mounted after profiling started)', () => {\n+ \/\/ @reactVersion <= 18.2\n+ it('should collect data for each root (including ones added or mounted after profiling started) (legacy render)', () => {\n const Parent = ({count}) => {\n Scheduler.unstable_advanceTime(10);\n const children = new Array(count)\n@@ -151,6 +156,116 @@ describe('ProfilingCache', () => {\n });\n });\n \n+ \/\/ @reactVersion >= 18\n+ it('should collect data for each root (including ones added or mounted after profiling started) (createRoot)', () => {\n+ const Parent = ({count}) => {\n+ Scheduler.unstable_advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => );\n+ return (\n+ \n+ {children}\n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({duration}) => {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const RootA = ({children}) => children;\n+ const RootB = ({children}) => children;\n+ const RootC = ({children}) => children;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+ const containerC = document.createElement('div');\n+\n+ const rootA = ReactDOMClient.createRoot(containerA);\n+ const rootB = ReactDOMClient.createRoot(containerB);\n+ const rootC = ReactDOMClient.createRoot(containerC);\n+\n+ utils.act(() =>\n+ rootA.render(\n+ \n+ \n+ <\/RootA>,\n+ ),\n+ );\n+ utils.act(() =>\n+ rootB.render(\n+ \n+ \n+ <\/RootB>,\n+ ),\n+ );\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ rootA.render(\n+ \n+ \n+ <\/RootA>,\n+ ),\n+ );\n+ utils.act(() =>\n+ rootC.render(\n+ \n+ \n+ <\/RootC>,\n+ ),\n+ );\n+ utils.act(() =>\n+ rootA.render(\n+ \n+ \n+ <\/RootA>,\n+ ),\n+ );\n+ utils.act(() => rootB.unmount());\n+ utils.act(() =>\n+ rootA.render(\n+ \n+ \n+ <\/RootA>,\n+ ),\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+ utils.act(() => rootA.unmount());\n+\n+ const rootIDs = Array.from(\n+ store.profilerStore.profilingData.dataForRoots.values(),\n+ ).map(({rootID}) => rootID);\n+ expect(rootIDs).toHaveLength(3);\n+\n+ const originalProfilingDataForRoot = [];\n+\n+ let data = store.profilerStore.getDataForRoot(rootIDs[0]);\n+ expect(data.displayName).toMatchInlineSnapshot(`\"RootA\"`);\n+ expect(data.commitData).toHaveLength(3);\n+ originalProfilingDataForRoot.push(data);\n+\n+ data = store.profilerStore.getDataForRoot(rootIDs[1]);\n+ expect(data.displayName).toMatchInlineSnapshot(`\"RootC\"`);\n+ expect(data.commitData).toHaveLength(1);\n+ originalProfilingDataForRoot.push(data);\n+\n+ data = store.profilerStore.getDataForRoot(rootIDs[2]);\n+ expect(data.displayName).toMatchInlineSnapshot(`\"RootB\"`);\n+ expect(data.commitData).toHaveLength(1);\n+ originalProfilingDataForRoot.push(data);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ rootIDs.forEach((rootID, index) => {\n+ const current = store.profilerStore.getDataForRoot(rootID);\n+ const prev = originalProfilingDataForRoot[index];\n+ expect(current).toEqual(prev);\n+ });\n+ });\n+\n \/\/ @reactVersion >= 16.9\n it('should collect data for each commit', () => {\n const Parent = ({count}) => {\n@@ -171,13 +286,11 @@ describe('ProfilingCache', () => {\n };\n const MemoizedChild = React.memo(Child);\n \n- const container = document.createElement('div');\n-\n utils.act(() => store.profilerStore.startProfiling());\n- utils.act(() => legacyRender(, container));\n- utils.act(() => legacyRender(, container));\n- utils.act(() => legacyRender(, container));\n- utils.act(() => legacyRender(, container));\n+ utils.act(() => render());\n+ utils.act(() => render());\n+ utils.act(() => render());\n+ utils.act(() => render());\n utils.act(() => store.profilerStore.stopProfiling());\n \n const rootID = store.roots[0];\n@@ -244,19 +357,13 @@ describe('ProfilingCache', () => {\n }\n }\n \n- const container = document.createElement('div');\n-\n utils.act(() => store.profilerStore.startProfiling());\n- utils.act(() => legacyRender(, container));\n+ utils.act(() => render());\n expect(instance).not.toBeNull();\n utils.act(() => (instance: any).setState({count: 1}));\n- utils.act(() =>\n- legacyRender(, container),\n- );\n- utils.act(() =>\n- legacyRender(, container),\n- );\n- utils.act(() => legacyRender(, container));\n+ utils.act(() => render());\n+ utils.act(() => render());\n+ utils.act(() => render());\n utils.act(() => store.profilerStore.stopProfiling());\n \n const rootID = store.roots[0];\n@@ -574,25 +681,21 @@ describe('ProfilingCache', () => {\n return null;\n };\n \n- const container = document.createElement('div');\n-\n utils.act(() => store.profilerStore.startProfiling());\n utils.act(() =>\n- legacyRender(\n+ render(\n \n \n <\/Context.Provider>,\n- container,\n ),\n );\n \n \/\/ Second render has no changed hooks, only changed props.\n utils.act(() =>\n- legacyRender(\n+ render(\n \n \n <\/Context.Provider>,\n- container,\n ),\n );\n \n@@ -604,11 +707,10 @@ describe('ProfilingCache', () => {\n \n \/\/ Fifth render has a changed context value, but no changed hook.\n utils.act(() =>\n- legacyRender(\n+ render(\n \n \n <\/Context.Provider>,\n- container,\n ),\n );\n \n@@ -754,9 +856,7 @@ describe('ProfilingCache', () => {\n };\n \n utils.act(() => store.profilerStore.startProfiling());\n- utils.act(() =>\n- legacyRender(, document.createElement('div')),\n- );\n+ utils.act(() => render());\n utils.act(() => store.profilerStore.stopProfiling());\n \n expect(store).toMatchInlineSnapshot(`\n@@ -822,9 +922,7 @@ describe('ProfilingCache', () => {\n };\n \n utils.act(() => store.profilerStore.startProfiling());\n- await utils.actAsync(() =>\n- legacyRender(, document.createElement('div')),\n- );\n+ await utils.actAsync(() => render());\n utils.act(() => store.profilerStore.stopProfiling());\n \n const rootID = store.roots[0];\n@@ -880,12 +978,10 @@ describe('ProfilingCache', () => {\n };\n const MemoizedChild = React.memo(Child);\n \n- const container = document.createElement('div');\n-\n utils.act(() => store.profilerStore.startProfiling());\n- utils.act(() => legacyRender(, container));\n- utils.act(() => legacyRender(, container));\n- utils.act(() => legacyRender(, container));\n+ utils.act(() => render());\n+ utils.act(() => render());\n+ utils.act(() => render());\n utils.act(() => store.profilerStore.stopProfiling());\n \n const rootID = store.roots[0];\n@@ -940,11 +1036,11 @@ describe('ProfilingCache', () => {\n \n \/\/ @reactVersion >= 18.0.0\n \/\/ @reactVersion <= 18.2.0\n- it('should handle unexpectedly shallow suspense trees for react v[18.0.0 - 18.2.0]', () => {\n- const container = document.createElement('div');\n-\n+ it('should handle unexpectedly shallow suspense trees for react v[18.0.0 - 18.2.0] (legacy render)', () => {\n utils.act(() => store.profilerStore.startProfiling());\n- utils.act(() => legacyRender(, container));\n+ utils.act(() =>\n+ legacyRender(, document.createElement('div')),\n+ );\n utils.act(() => store.profilerStore.stopProfiling());\n \n const rootID = store.roots[0];\n@@ -981,13 +1077,51 @@ describe('ProfilingCache', () => {\n `);\n });\n \n- \/\/ This test is not gated.\n- \/\/ For this test we use the current version of react, built from source.\n- it('should handle unexpectedly shallow suspense trees', () => {\n- const container = document.createElement('div');\n+ \/\/ @reactVersion >= 18.0.0\n+ \/\/ @reactVersion <= 18.2.0\n+ it('should handle unexpectedly shallow suspense trees for react v[18.0.0 - 18.2.0] (createRoot)', () => {\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => render());\n+ utils.act(() => store.profilerStore.stopProfiling());\n \n+ const rootID = store.roots[0];\n+ const commitData = store.profilerStore.getDataForRoot(rootID).commitData;\n+ expect(commitData).toMatchInlineSnapshot(`\n+ [\n+ {\n+ \"changeDescriptions\": Map {},\n+ \"duration\": 0,\n+ \"effectDuration\": null,\n+ \"fiberActualDurations\": Map {\n+ 1 => 0,\n+ 2 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 0,\n+ },\n+ \"passiveEffectDuration\": null,\n+ \"priorityLevel\": \"Normal\",\n+ \"timestamp\": 0,\n+ \"updaters\": [\n+ {\n+ \"compiledWithForget\": false,\n+ \"displayName\": \"createRoot()\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"type\": 11,\n+ },\n+ ],\n+ },\n+ ]\n+ `);\n+ });\n+\n+ \/\/ @reactVersion > 18.2.0\n+ it('should handle unexpectedly shallow suspense trees', () => {\n utils.act(() => store.profilerStore.startProfiling());\n- utils.act(() => legacyRender(, container));\n+ utils.act(() => render());\n utils.act(() => store.profilerStore.stopProfiling());\n \n const rootID = store.roots[0];\n@@ -1012,7 +1146,7 @@ describe('ProfilingCache', () => {\n \"updaters\": [\n {\n \"compiledWithForget\": false,\n- \"displayName\": \"render()\",\n+ \"displayName\": \"createRoot()\",\n \"hocDisplayNames\": null,\n \"id\": 1,\n \"key\": null,\n@@ -1105,13 +1239,12 @@ describe('ProfilingCache', () => {\n \n const {Simulate} = require('react-dom\/test-utils');\n \n- const container = document.createElement('div');\n- utils.act(() => legacyRender(, container));\n- expect(container.textContent).toBe('Home');\n+ utils.act(() => render());\n+ expect(getContainer().textContent).toBe('Home');\n utils.act(() => store.profilerStore.startProfiling());\n utils.act(() => Simulate.click(linkRef.current));\n utils.act(() => store.profilerStore.stopProfiling());\n- expect(container.textContent).toBe('About');\n+ expect(getContainer().textContent).toBe('About');\n });\n \n \/\/ @reactVersion >= 18.0\n"}

dillon1000/react

Files changed