Passing React 17

Author: eps1lon

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

@@ -724,34 +724,69 @@ describe('ProfilingCache', () => {
     const rootID = store.roots[0];
     const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
     expect(commitData).toHaveLength(2);
-    expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
-      Map {
-        1 => 15,
-        2 => 15,
-        3 => 5,
-        4 => 2,
-      }
-    `);
-    expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
-      Map {
-        1 => 0,
-        2 => 10,
-        3 => 3,
-        4 => 2,
-      }
-    `);
-    expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
-      Map {
-        5 => 3,
-        3 => 3,
-      }
-    `);
-    expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
-      Map {
-        5 => 3,
-        3 => 0,
-      }
-    `);
+
+    const isLegacySuspense = React.version.startsWith('17');
+    if (isLegacySuspense) {
+      expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
+        Map {
+          1 => 15,
+          2 => 15,
+          3 => 5,
+          4 => 3,
+          5 => 2,
+        }
+      `);
+      expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
+        Map {
+          1 => 0,
+          2 => 10,
+          3 => 3,
+          4 => 3,
+          5 => 2,
+        }
+      `);
+      expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
+        Map {
+          6 => 3,
+          3 => 3,
+        }
+      `);
+      expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
+        Map {
+          6 => 3,
+          3 => 0,
+        }
+      `);
+    } else {
+      expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
+        Map {
+          1 => 15,
+          2 => 15,
+          3 => 5,
+          4 => 2,
+        }
+      `);
+      expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
+        Map {
+          1 => 0,
+          2 => 10,
+          3 => 3,
+          4 => 2,
+        }
+      `);
+      expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
+        Map {
+          5 => 3,
+          3 => 3,
+        }
+      `);
+      expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
+        Map {
+          5 => 3,
+          3 => 0,
+        }
+      `);
+    }
   });
 
   // @reactVersion >= 16.9

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

@@ -15,10 +15,12 @@ import {
 } from './utils';
 
 describe('commit tree', () => {
-  let React;
+  let React = require('react');
   let Scheduler;
   let store: Store;
   let utils;
+  const isLegacySuspense =
+    React.version.startsWith('16') || React.version.startsWith('17');
 
   beforeEach(() => {
     utils = require('./utils');
@@ -184,13 +186,24 @@ describe('commit tree', () => {
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => legacyRender(<App renderChildren={true} />));
       await Promise.resolve();
-      expect(store).toMatchInlineSnapshot(`
-        [root]
-          ▾ <App>
-              <Suspense>
-        [suspense-root]  rects={null}
-          <Suspense name="App" rects={null}>
-      `);
+      if (isLegacySuspense) {
+        expect(store).toMatchInlineSnapshot(`
+          [root]
+            ▾ <App>
+              ▾ <Suspense>
+                  <Lazy>
+          [suspense-root]  rects={null}
+            <Suspense name="App" rects={null}>
+        `);
+      } else {
+        expect(store).toMatchInlineSnapshot(`
+          [root]
+            ▾ <App>
+                <Suspense>
+          [suspense-root]  rects={null}
+            <Suspense name="App" rects={null}>
+        `);
+      }
       utils.act(() => legacyRender(<App renderChildren={true} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -218,7 +231,13 @@ describe('commit tree', () => {
         );
       }
 
-      expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
+      expect(commitTrees[0].nodes.size).toBe(
+        isLegacySuspense
+          ? // <Root> + <App> + <Suspense> + <Lazy>
+            4
+          : // <Root> + <App> + <Suspense>
+            3,
+      );
       expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
       expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
     });
@@ -272,13 +291,24 @@ describe('commit tree', () => {
     it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => legacyRender(<App renderChildren={true} />));
-      expect(store).toMatchInlineSnapshot(`
-        [root]
-          ▾ <App>
-              <Suspense>
-        [suspense-root]  rects={null}
-          <Suspense name="App" rects={null}>
-      `);
+      if (isLegacySuspense) {
+        expect(store).toMatchInlineSnapshot(`
+          [root]
+            ▾ <App>
+              ▾ <Suspense>
+                  <Lazy>
+          [suspense-root]  rects={null}
+            <Suspense name="App" rects={null}>
+        `);
+      } else {
+        expect(store).toMatchInlineSnapshot(`
+          [root]
+            ▾ <App>
+                <Suspense>
+          [suspense-root]  rects={null}
+            <Suspense name="App" rects={null}>
+        `);
+      }
       utils.act(() => legacyRender(<App renderChildren={false} />));
       expect(store).toMatchInlineSnapshot(`
         [root]
@@ -297,7 +327,13 @@ describe('commit tree', () => {
         );
       }
 
-      expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
+      expect(commitTrees[0].nodes.size).toBe(
+        isLegacySuspense
+          ? // <Root> + <App> + <Suspense> + <Lazy>
+            4
+          : // <Root> + <App> + <Suspense>
+            3,
+      );
       expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
     });