Skip to content

Commit

Permalink
chore: use versioned render in profilingCommitTreeBuilder test and ga…
Browse files Browse the repository at this point in the history 
…te some for legacy rendering
  • Loading branch information
@hoxyq
hoxyq committed Feb 2, 2024
1 parent e51cda5 commit 460326b
Showing 1 changed file with 24 additions and 29 deletions.
53 changes: 24 additions & 29 deletions packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,22 @@
*/

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;
Expand All @@ -32,7 +33,11 @@ describe('commit tree', () => {
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);
Expand All @@ -45,31 +50,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>
Expand Down Expand Up @@ -118,25 +121,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>
Expand All @@ -161,25 +163,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>
Expand All @@ -203,17 +202,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>
Expand All @@ -237,17 +235,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>
Expand Down

0 comments on commit 460326b

Please sign in to comment.