From db93097a191835899cd9bfca45dc722e5518ca14 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Fri, 2 Feb 2024 19:59:31 +0000 Subject: [PATCH] chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering --- .../profilingCommitTreeBuilder-test.js | 115 +++++++++++++----- .../src/__tests__/utils.js | 5 +- 2 files changed, 88 insertions(+), 32 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js index f1bd28b68d329..f5b7e5fded401 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js @@ -9,11 +9,14 @@ 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; @@ -21,19 +24,20 @@ describe('commit tree', () => { 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 - it('should be able to rebuild the store tree for each commit', () => { + // @reactVersion <= 18.2 + it('should be able to rebuild the store tree for each commit (legacy render)', () => { const Parent = ({count}) => { Scheduler.unstable_advanceTime(10); return new Array(count) @@ -45,16 +49,73 @@ describe('commit tree', () => { return null; }); - const container = document.createElement('div'); + utils.act(() => store.profilerStore.startProfiling()); + utils.act(() => legacyRender()); + expect(store).toMatchInlineSnapshot(` + [root] + ▾ + [Memo] + `); + utils.act(() => legacyRender()); + expect(store).toMatchInlineSnapshot(` + [root] + ▾ + [Memo] + [Memo] + [Memo] + `); + utils.act(() => legacyRender()); + expect(store).toMatchInlineSnapshot(` + [root] + ▾ + [Memo] + [Memo] + `); + utils.act(() => legacyRender()); + expect(store).toMatchInlineSnapshot(` + [root] + + `); + utils.act(() => store.profilerStore.stopProfiling()); + + const rootID = store.roots[0]; + const commitTrees = []; + for (let commitIndex = 0; commitIndex < 4; commitIndex++) { + commitTrees.push( + store.profilerStore.profilingCache.getCommitTree({ + commitIndex, + rootID, + }), + ); + } + + expect(commitTrees[0].nodes.size).toBe(3); // + + + expect(commitTrees[1].nodes.size).toBe(5); // + + x 3 + expect(commitTrees[2].nodes.size).toBe(4); // + + x 2 + expect(commitTrees[3].nodes.size).toBe(2); // + + }); + + // @reactVersion >= 18 + it('should be able to rebuild the store tree for each commit (createRoot)', () => { + const Parent = ({count}) => { + Scheduler.unstable_advanceTime(10); + return new Array(count) + .fill(true) + .map((_, index) => ); + }; + const Child = React.memo(function Child() { + Scheduler.unstable_advanceTime(2); + return null; + }); utils.act(() => store.profilerStore.startProfiling()); - utils.act(() => legacyRender(, container)); + utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` [root] ▾ [Memo] `); - utils.act(() => legacyRender(, container)); + utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` [root] ▾ @@ -62,14 +123,14 @@ describe('commit tree', () => { [Memo] [Memo] `); - utils.act(() => legacyRender(, container)); + utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` [root] ▾ [Memo] [Memo] `); - utils.act(() => legacyRender(, container)); + utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` [root] @@ -118,25 +179,24 @@ describe('commit tree', () => { }); // @reactVersion >= 16.9 + // @reactVersion <= 18.2 it('should support Lazy components (legacy render)', async () => { - const container = document.createElement('div'); - utils.act(() => store.profilerStore.startProfiling()); - utils.act(() => legacyRender(, container)); + utils.act(() => legacyRender()); await Promise.resolve(); expect(store).toMatchInlineSnapshot(` [root] ▾ `); - utils.act(() => legacyRender(, container)); + utils.act(() => legacyRender()); expect(store).toMatchInlineSnapshot(` [root] ▾ ▾ `); - utils.act(() => legacyRender(, container)); + utils.act(() => legacyRender()); expect(store).toMatchInlineSnapshot(` [root] @@ -161,25 +221,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()); + utils.act(() => modernRender()); await Promise.resolve(); expect(store).toMatchInlineSnapshot(` [root] ▾ `); - utils.act(() => root.render()); + utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` [root] ▾ ▾ `); - utils.act(() => root.render()); + utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` [root] @@ -203,17 +260,16 @@ describe('commit tree', () => { }); // @reactVersion >= 16.9 + // @reactVersion <= 18.2 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(, container)); + utils.act(() => legacyRender()); expect(store).toMatchInlineSnapshot(` [root] ▾ `); - utils.act(() => legacyRender(, container)); + utils.act(() => legacyRender()); expect(store).toMatchInlineSnapshot(` [root] @@ -237,17 +293,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()); + utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` [root] ▾ `); - utils.act(() => root.render()); + utils.act(() => modernRender()); expect(store).toMatchInlineSnapshot(` [root] diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js index 8555302507ff5..f00e66d98396e 100644 --- a/packages/react-devtools-shared/src/__tests__/utils.js +++ b/packages/react-devtools-shared/src/__tests__/utils.js @@ -182,6 +182,9 @@ export function getModernRenderImplementation(): RenderImplementation { }); function render(elements) { + if (root == null) { + root = ReactDOMClient.createRoot(container); + } root.render(elements); return unmount; @@ -195,7 +198,7 @@ export function getModernRenderImplementation(): RenderImplementation { container = document.createElement('div'); document.body.appendChild(container); - root = ReactDOMClient.createRoot(container); + root = null; containersToRemove.push(container); }