diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index 23ad7f657ba33..f4a2b715bbea2 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -9,16 +9,16 @@ 'use strict'; -import {normalizeCodeLocInfo} from './utils'; +import { + getLegacyRenderImplementation, + getModernRenderImplementation, + normalizeCodeLocInfo +} from './utils'; describe('Timeline profiler', () => { let React; - let ReactDOMClient; let Scheduler; - let renderHelper; - let renderRootHelper; let store; - let unmountFns; let utils; let waitFor; let waitForAll; @@ -29,23 +29,7 @@ describe('Timeline profiler', () => { utils = require('./utils'); utils.beforeEachProfiling(); - unmountFns = []; - renderHelper = element => { - const unmountFn = utils.legacyRender(element); - unmountFns.push(unmountFn); - return unmountFn; - }; - renderRootHelper = element => { - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - root.render(element); - const unmountFn = () => root.unmount(); - unmountFns.push(unmountFn); - return unmountFn; - }; - React = require('react'); - ReactDOMClient = require('react-dom/client'); Scheduler = require('scheduler'); const InternalTestUtils = require('internal-test-utils'); @@ -135,13 +119,15 @@ describe('Timeline profiler', () => { // Verify all logged marks also get cleared. expect(marks).toHaveLength(0); - unmountFns.forEach(unmountFn => unmountFn()); - setPerformanceMock(null); }); + const {render: legacyRender} = getLegacyRenderImplementation(); + const {render: modernRender} = getModernRenderImplementation(); + + // @reactVersion < 19 it('should mark sync render without suspends or state updates', () => { - renderHelper(
); + legacyRender(
); expect(clearedMarks).toMatchInlineSnapshot(` [ @@ -162,7 +148,7 @@ describe('Timeline profiler', () => { }); it('should mark concurrent render without suspends or state updates', async () => { - renderRootHelper(
); + modernRender(
); expect(clearedMarks).toMatchInlineSnapshot(` [ @@ -203,7 +189,7 @@ describe('Timeline profiler', () => { } React.startTransition(() => { - renderRootHelper(); + modernRender(); }); await waitFor(['Foo']); @@ -225,7 +211,7 @@ describe('Timeline profiler', () => { throw fakeSuspensePromise; } - renderHelper( + legacyRender( , @@ -261,13 +247,14 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion < 19 it('should mark sync render with suspense that rejects', async () => { const fakeSuspensePromise = Promise.reject(new Error('error')); function Example() { throw fakeSuspensePromise; } - renderHelper( + legacyRender( , @@ -309,7 +296,7 @@ describe('Timeline profiler', () => { throw fakeSuspensePromise; } - renderRootHelper( + modernRender( , @@ -364,7 +351,7 @@ describe('Timeline profiler', () => { throw fakeSuspensePromise; } - renderRootHelper( + modernRender( , @@ -423,7 +410,7 @@ describe('Timeline profiler', () => { } } - renderRootHelper(); + modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` [ @@ -476,7 +463,7 @@ describe('Timeline profiler', () => { } } - renderRootHelper(); + modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` [ @@ -530,7 +517,7 @@ describe('Timeline profiler', () => { } } - renderRootHelper(); + modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` [ @@ -584,7 +571,7 @@ describe('Timeline profiler', () => { } } - renderRootHelper(); + modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` [ @@ -635,7 +622,7 @@ describe('Timeline profiler', () => { return didMount; } - renderRootHelper(); + modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` [ @@ -689,7 +676,7 @@ describe('Timeline profiler', () => { return didMount; } - renderRootHelper(); + modernRender(); await waitForAll([]); @@ -738,7 +725,7 @@ describe('Timeline profiler', () => { return didRender; } - renderRootHelper(); + modernRender(); await waitForAll([]); @@ -763,6 +750,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion < 19 it('should mark sync render that throws', async () => { jest.spyOn(console, 'error').mockImplementation(() => {}); @@ -783,7 +771,7 @@ describe('Timeline profiler', () => { throw Error('Expected error'); } - renderHelper( + legacyRender( , @@ -846,7 +834,7 @@ describe('Timeline profiler', () => { throw 'Expected error'; } - renderRootHelper( + modernRender( , @@ -945,7 +933,7 @@ describe('Timeline profiler', () => { return null; } - const unmount = renderRootHelper(); + const unmount = modernRender(); await waitForPaint(['layout 1 mount', 'layout 2 mount']); @@ -1038,8 +1026,9 @@ describe('Timeline profiler', () => { }); describe('lane labels', () => { + // @reactVersion < 19 it('regression test SyncLane', () => { - renderHelper(
); + legacyRender(
); expect(clearedMarks).toMatchInlineSnapshot(` [ @@ -1060,7 +1049,7 @@ describe('Timeline profiler', () => { }); it('regression test DefaultLane', () => { - renderRootHelper(
); + modernRender(
); expect(clearedMarks).toMatchInlineSnapshot(` [ "--schedule-render-32", @@ -1079,7 +1068,7 @@ describe('Timeline profiler', () => { return