chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering

Author: hoxyq

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

@@ -8,31 +8,34 @@
  */
 
 import type Store from 'react-devtools-shared/src/devtools/store';
+import {
+  getLegacyRenderImplementation,
+  getModernRenderImplementation,
+} from './utils';
 
 describe('commit tree', () => {
   let React;
-  let ReactDOMClient;
   let Scheduler;
-  let legacyRender;
   let store: Store;
   let utils;
 
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
-    legacyRender = utils.legacyRender;
-
     store = global.store;
     store.collapseNodesByDefault = false;
     store.recordChangeDescriptions = true;
 
     React = require('react');
-    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
   });
 
+  const {render: legacyRender} = getLegacyRenderImplementation();
+  const {render: modernRender} = getModernRenderImplementation();
+
   // @reactVersion >= 16.9
+  // @reactVersion < 19
   it('should be able to rebuild the store tree for each commit', () => {
     const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
@@ -45,31 +48,29 @@ describe('commit tree', () => {
       return null;
     });
 
-    const container = document.createElement('div');
-
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => legacyRender(<Parent count={1} />, container));
+    utils.act(() => legacyRender(<Parent count={1} />));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Parent>
             <Child key="0"> [Memo]
     `);
-    utils.act(() => legacyRender(<Parent count={3} />, container));
+    utils.act(() => legacyRender(<Parent count={3} />));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Parent>
             <Child key="0"> [Memo]
             <Child key="1"> [Memo]
             <Child key="2"> [Memo]
     `);
-    utils.act(() => legacyRender(<Parent count={2} />, container));
+    utils.act(() => legacyRender(<Parent count={2} />));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Parent>
             <Child key="0"> [Memo]
             <Child key="1"> [Memo]
     `);
-    utils.act(() => legacyRender(<Parent count={0} />, container));
+    utils.act(() => legacyRender(<Parent count={0} />));
     expect(store).toMatchInlineSnapshot(`
       [root]
           <Parent>
@@ -118,25 +119,24 @@ describe('commit tree', () => {
     });
 
     // @reactVersion >= 16.9
+    // @reactVersion < 19
     it('should support Lazy components (legacy render)', async () => {
-      const container = document.createElement('div');
-
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() => legacyRender(<App renderChildren={true} />, container));
+      utils.act(() => legacyRender(<App renderChildren={true} />));
       await Promise.resolve();
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <App>
               <Suspense>
       `);
-      utils.act(() => legacyRender(<App renderChildren={true} />, container));
+      utils.act(() => legacyRender(<App renderChildren={true} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <App>
             ▾ <Suspense>
                 <LazyInnerComponent>
       `);
-      utils.act(() => legacyRender(<App renderChildren={false} />, container));
+      utils.act(() => legacyRender(<App renderChildren={false} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
             <App>
@@ -161,25 +161,22 @@ describe('commit tree', () => {
 
     // @reactVersion >= 18.0
     it('should support Lazy components (createRoot)', async () => {
-      const container = document.createElement('div');
-      const root = ReactDOMClient.createRoot(container);
-
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() => root.render(<App renderChildren={true} />));
+      utils.act(() => modernRender(<App renderChildren={true} />));
       await Promise.resolve();
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <App>
               <Suspense>
       `);
-      utils.act(() => root.render(<App renderChildren={true} />));
+      utils.act(() => modernRender(<App renderChildren={true} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <App>
             ▾ <Suspense>
                 <LazyInnerComponent>
       `);
-      utils.act(() => root.render(<App renderChildren={false} />));
+      utils.act(() => modernRender(<App renderChildren={false} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
             <App>
@@ -203,17 +200,16 @@ describe('commit tree', () => {
     });
 
     // @reactVersion >= 16.9
+    // @reactVersion < 19
     it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
-      const container = document.createElement('div');
-
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() => legacyRender(<App renderChildren={true} />, container));
+      utils.act(() => legacyRender(<App renderChildren={true} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <App>
               <Suspense>
       `);
-      utils.act(() => legacyRender(<App renderChildren={false} />, container));
+      utils.act(() => legacyRender(<App renderChildren={false} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
             <App>
@@ -237,17 +233,14 @@ describe('commit tree', () => {
 
     // @reactVersion >= 18.0
     it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
-      const container = document.createElement('div');
-      const root = ReactDOMClient.createRoot(container);
-
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() => root.render(<App renderChildren={true} />));
+      utils.act(() => modernRender(<App renderChildren={true} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▾ <App>
               <Suspense>
       `);
-      utils.act(() => root.render(<App renderChildren={false} />));
+      utils.act(() => modernRender(<App renderChildren={false} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
             <App>