{"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/profilerContext-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/profilerContext-test.js\nindex 325e6e5075..17f758b612 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/profilerContext-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/profilerContext-test.js\n@@ -13,9 +13,12 @@ import type {Context} from 'react-devtools-shared\/src\/devtools\/views\/Profiler\/Pr\n import type {DispatcherContext} from 'react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext';\n import type Store from 'react-devtools-shared\/src\/devtools\/store';\n \n+import {getVersionedRenderImplementation} from '.\/utils';\n+\n describe('ProfilerContext', () => {\n let React;\n let ReactDOM;\n+ let ReactDOMClient;\n let TestRenderer: ReactTestRenderer;\n let bridge: FrontendBridge;\n let legacyRender;\n@@ -43,6 +46,7 @@ describe('ProfilerContext', () => {\n \n React = require('react');\n ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n TestRenderer = utils.requireTestRenderer();\n \n BridgeContext =\n@@ -61,6 +65,8 @@ describe('ProfilerContext', () => {\n require('react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext').TreeStateContext;\n });\n \n+ const {render} = getVersionedRenderImplementation();\n+\n const Contexts = ({\n children = null,\n defaultSelectedElementID = null,\n@@ -77,7 +83,9 @@ describe('ProfilerContext', () => {\n <\/BridgeContext.Provider>\n );\n \n- it('updates updates profiling support based on the attached roots', async () => {\n+ \/\/ @reactVersion <= 18.2\n+ \/\/ @reactVersion >= 18.0\n+ it('updates updates profiling support based on the attached roots (legacy render)', async () => {\n const Component = () => null;\n \n let context: Context = ((null: any): Context);\n@@ -110,10 +118,47 @@ describe('ProfilerContext', () => {\n expect(context.supportsProfiling).toBe(false);\n });\n \n+ \/\/ @reactVersion >= 18\n+ it('updates updates profiling support based on the attached roots (createRoot)', async () => {\n+ const Component = () => null;\n+\n+ let context: Context = ((null: any): Context);\n+\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+ await utils.actAsync(() => {\n+ TestRenderer.create(\n+ \n+ \n+ <\/Contexts>,\n+ );\n+ });\n+\n+ expect(context.supportsProfiling).toBe(false);\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ const rootA = ReactDOMClient.createRoot(containerA);\n+ const rootB = ReactDOMClient.createRoot(containerB);\n+\n+ await utils.actAsync(() => rootA.render());\n+ expect(context.supportsProfiling).toBe(true);\n+\n+ await utils.actAsync(() => rootB.render());\n+ await utils.actAsync(() => rootA.unmount());\n+ expect(context.supportsProfiling).toBe(true);\n+\n+ await utils.actAsync(() => rootB.unmount());\n+ expect(context.supportsProfiling).toBe(false);\n+ });\n+\n it('should gracefully handle an empty profiling session (with no recorded commits)', async () => {\n const Example = () => null;\n \n- utils.act(() => legacyRender(, document.createElement('div')));\n+ utils.act(() => render());\n \n let context: Context = ((null: any): Context);\n \n@@ -145,7 +190,9 @@ describe('ProfilerContext', () => {\n expect(context.profilingData).toBe(null);\n });\n \n- it('should auto-select the root ID matching the Components tab selection if it has profiling data', async () => {\n+ \/\/ @reactVersion <= 18.2\n+ \/\/ @reactVersion >= 18.0\n+ it('should auto-select the root ID matching the Components tab selection if it has profiling data (legacy render)', async () => {\n const Parent = () => ;\n const Child = () => null;\n \n@@ -191,7 +238,60 @@ describe('ProfilerContext', () => {\n );\n });\n \n- it('should not select the root ID matching the Components tab selection if it has no profiling data', async () => {\n+ \/\/ @reactVersion >= 18\n+ it('should auto-select the root ID matching the Components tab selection if it has profiling data (createRoot)', async () => {\n+ const Parent = () => ;\n+ const Child = () => null;\n+\n+ const containerOne = document.createElement('div');\n+ const containerTwo = document.createElement('div');\n+\n+ const rootOne = ReactDOMClient.createRoot(containerOne);\n+ const rootTwo = ReactDOMClient.createRoot(containerTwo);\n+\n+ utils.act(() => rootOne.render());\n+ utils.act(() => rootTwo.render());\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ [root]\n+ ▾ \n+ \n+ `);\n+\n+ \/\/ Profile and record updates to both roots.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => rootOne.render());\n+ await utils.actAsync(() => rootTwo.render());\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ let context: Context = ((null: any): Context);\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+\n+ \/\/ Select an element within the second root.\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ \n+ \n+ <\/Contexts>,\n+ ),\n+ );\n+\n+ expect(context).not.toBeNull();\n+ expect(context.rootID).toBe(\n+ store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number)),\n+ );\n+ });\n+\n+ \/\/ @reactVersion <= 18.2\n+ \/\/ @reactVersion >= 18.0\n+ it('should not select the root ID matching the Components tab selection if it has no profiling data (legacy render)', async () => {\n const Parent = () => ;\n const Child = () => null;\n \n@@ -237,7 +337,60 @@ describe('ProfilerContext', () => {\n );\n });\n \n- it('should maintain root selection between profiling sessions so long as there is data for that root', async () => {\n+ \/\/ @reactVersion >= 18\n+ it('should not select the root ID matching the Components tab selection if it has no profiling data (createRoot)', async () => {\n+ const Parent = () => ;\n+ const Child = () => null;\n+\n+ const containerOne = document.createElement('div');\n+ const containerTwo = document.createElement('div');\n+\n+ const rootOne = ReactDOMClient.createRoot(containerOne);\n+ const rootTwo = ReactDOMClient.createRoot(containerTwo);\n+\n+ utils.act(() => rootOne.render());\n+ utils.act(() => rootTwo.render());\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ [root]\n+ ▾ \n+ \n+ `);\n+\n+ \/\/ Profile and record updates to only the first root.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => rootOne.render());\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ let context: Context = ((null: any): Context);\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+\n+ \/\/ Select an element within the second root.\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ \n+ \n+ <\/Contexts>,\n+ ),\n+ );\n+\n+ \/\/ Verify the default profiling root is the first one.\n+ expect(context).not.toBeNull();\n+ expect(context.rootID).toBe(\n+ store.getRootIDForElement(((store.getElementIDAtIndex(0): any): number)),\n+ );\n+ });\n+\n+ \/\/ @reactVersion <= 18.2\n+ \/\/ @reactVersion >= 18.0\n+ it('should maintain root selection between profiling sessions so long as there is data for that root (legacy render)', async () => {\n const Parent = () => ;\n const Child = () => null;\n \n@@ -300,6 +453,75 @@ describe('ProfilerContext', () => {\n expect(context.rootID).toBe(store.getRootIDForElement(id));\n });\n \n+ \/\/ @reactVersion >= 18.0\n+ it('should maintain root selection between profiling sessions so long as there is data for that root (createRoot)', async () => {\n+ const Parent = () => ;\n+ const Child = () => null;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ const rootA = ReactDOMClient.createRoot(containerA);\n+ const rootB = ReactDOMClient.createRoot(containerB);\n+\n+ utils.act(() => rootA.render());\n+ utils.act(() => rootB.render());\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ [root]\n+ ▾ \n+ \n+ `);\n+\n+ \/\/ Profile and record updates.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => rootA.render());\n+ await utils.actAsync(() => rootB.render());\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ let context: Context = ((null: any): Context);\n+ let dispatch: DispatcherContext = ((null: any): DispatcherContext);\n+ let selectedElementID = null;\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ dispatch = React.useContext(TreeDispatcherContext);\n+ selectedElementID = React.useContext(TreeStateContext).selectedElementID;\n+ return null;\n+ }\n+\n+ const id = ((store.getElementIDAtIndex(3): any): number);\n+\n+ \/\/ Select an element within the second root.\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ \n+ \n+ <\/Contexts>,\n+ ),\n+ );\n+\n+ expect(selectedElementID).toBe(id);\n+\n+ \/\/ Profile and record more updates to both roots\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => rootA.render());\n+ await utils.actAsync(() => rootB.render());\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ const otherID = ((store.getElementIDAtIndex(0): any): number);\n+\n+ \/\/ Change the selected element within a the Components tab.\n+ utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));\n+\n+ \/\/ Verify that the initial Profiler root selection is maintained.\n+ expect(selectedElementID).toBe(otherID);\n+ expect(context).not.toBeNull();\n+ expect(context.rootID).toBe(store.getRootIDForElement(id));\n+ });\n+\n it('should sync selected element in the Components tab too, provided the element is a match', async () => {\n const GrandParent = ({includeChild}) => (\n \n@@ -307,10 +529,7 @@ describe('ProfilerContext', () => {\n const Parent = ({includeChild}) => (includeChild ? : null);\n const Child = () => null;\n \n- const container = document.createElement('div');\n- utils.act(() =>\n- legacyRender(, container),\n- );\n+ utils.act(() => render());\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▾ \n@@ -323,12 +542,8 @@ describe('ProfilerContext', () => {\n \n \/\/ Profile and record updates.\n await utils.actAsync(() => store.profilerStore.startProfiling());\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n- await utils.actAsync(() =>\n- legacyRender(, container),\n- );\n+ await utils.actAsync(() => render());\n+ await utils.actAsync(() => render());\n await utils.actAsync(() => store.profilerStore.stopProfiling());\n \n expect(store).toMatchInlineSnapshot(`\n","commit":{"authorEmail":"rdlesyutin@gmail.com","subject":"chore: use versioned render in profilerContext test (#28243)","shortRevision":"ad720f36ec","authorName":"Ruslan Lesiutin","revision":"ad720f36ec3328c70aa30277f12985e30bc0e880","authoredAt":"2024-02-06T15:58:11+00:00"},"files":[{"path":"packages\/react-devtools-shared\/src\/__tests__\/profilerContext-test.js","status":"M"}],"parents":["5446b098a8ba23b8d1bd39e552bff9b09b52c334"],"body":""}

dillon1000/react

Files changed