{"files":[{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js"}],"commit":{"revision":"d1829775adeee0f888ec7d464eb3041cfe23f1c3","authoredAt":"2024-02-07T10:30:54+00:00","subject":"chore: use versioned render in TimelineProfiler test and gate some for legacy rendering (#28218)","authorName":"Ruslan Lesiutin","shortRevision":"d1829775ad","authorEmail":"rdlesyutin@gmail.com"},"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js\nindex 23ad7f657b..b136be6110 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js\n@@ -9,51 +9,25 @@\n \n 'use strict';\n \n-import {normalizeCodeLocInfo} from '.\/utils';\n+import {\n+ getLegacyRenderImplementation,\n+ getModernRenderImplementation,\n+ normalizeCodeLocInfo,\n+} from '.\/utils';\n \n describe('Timeline profiler', () => {\n let React;\n- let ReactDOMClient;\n let Scheduler;\n- let renderHelper;\n- let renderRootHelper;\n let store;\n- let unmountFns;\n let utils;\n- let waitFor;\n- let waitForAll;\n- let waitForPaint;\n- let assertLog;\n \n beforeEach(() => {\n utils = require('.\/utils');\n utils.beforeEachProfiling();\n \n- unmountFns = [];\n- renderHelper = element => {\n- const unmountFn = utils.legacyRender(element);\n- unmountFns.push(unmountFn);\n- return unmountFn;\n- };\n- renderRootHelper = element => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- root.render(element);\n- const unmountFn = () => root.unmount();\n- unmountFns.push(unmountFn);\n- return unmountFn;\n- };\n-\n React = require('react');\n- ReactDOMClient = require('react-dom\/client');\n Scheduler = require('scheduler');\n \n- const InternalTestUtils = require('internal-test-utils');\n- waitFor = InternalTestUtils.waitFor;\n- waitForAll = InternalTestUtils.waitForAll;\n- waitForPaint = InternalTestUtils.waitForPaint;\n- assertLog = InternalTestUtils.assertLog;\n-\n store = global.store;\n });\n \n@@ -135,18 +109,57 @@ describe('Timeline profiler', () => {\n \/\/ Verify all logged marks also get cleared.\n expect(marks).toHaveLength(0);\n \n- unmountFns.forEach(unmountFn => unmountFn());\n-\n setPerformanceMock(null);\n });\n \n- it('should mark sync render without suspends or state updates', () => {\n- renderHelper(

);\n+ describe('with legacy render', () => {\n+ const {render: legacyRender} = getLegacyRenderImplementation();\n+\n+ \/\/ @reactVersion <= 18.2\n+ \/\/ @reactVersion >= 18.0\n+ it('should mark sync render without suspends or state updates', () => {\n+ legacyRender(

);\n+\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ [\n+ \"--schedule-render-1\",\n+ \"--render-start-1\",\n+ \"--render-stop\",\n+ \"--commit-start-1\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen\",\n+ \"--layout-effects-start-1\",\n+ \"--layout-effects-stop\",\n+ \"--commit-stop\",\n+ ]\n+ `);\n+ });\n+\n+ \/\/ TODO(hoxyq): investigate why running this test with React 18 fails\n+ \/\/ @reactVersion <= 18.2\n+ \/\/ @reactVersion >= 18.0\n+ xit('should mark sync render with suspense that resolves', async () => {\n+ const fakeSuspensePromise = Promise.resolve(true);\n+ function Example() {\n+ throw fakeSuspensePromise;\n+ }\n+\n+ legacyRender(\n+ \n+ \n+ <\/React.Suspense>,\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-2\",\n \"--render-start-2\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n+ \"--suspense-suspend-0-Example-mount-2-\",\n \"--render-stop\",\n \"--commit-start-2\",\n \"--react-version-\",\n@@ -159,173 +172,224 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n- });\n \n- it('should mark concurrent render without suspends or state updates', async () => {\n- renderRootHelper(

);\n+ clearPendingMarks();\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n- [\n- \"--schedule-render-32\",\n- ]\n- `);\n+ await fakeSuspensePromise;\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ [\n+ \"--suspense-resolved-0-Example\",\n+ ]\n+ `);\n+ });\n \n- clearPendingMarks();\n+ \/\/ TODO(hoxyq): investigate why running this test with React 18 fails\n+ \/\/ @reactVersion <= 18.2\n+ \/\/ @reactVersion >= 18.0\n+ xit('should mark sync render with suspense that rejects', async () => {\n+ const fakeSuspensePromise = Promise.reject(new Error('error'));\n+ function Example() {\n+ throw fakeSuspensePromise;\n+ }\n \n- await waitForPaint([]);\n+ legacyRender(\n+ \n+ \n+ <\/React.Suspense>,\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n- \"--render-start-32\",\n+ \"--schedule-render-2\",\n+ \"--render-start-2\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n+ \"--suspense-suspend-0-Example-mount-2-\",\n \"--render-stop\",\n- \"--commit-start-32\",\n+ \"--commit-start-2\",\n \"--react-version-\",\n \"--profiler-version-1\",\n \"--react-internal-module-start- at filtered (:0:0)\",\n \"--react-internal-module-stop- at filtered (:1:1)\",\n \"--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred\",\n- \"--layout-effects-start-32\",\n+ \"--layout-effects-start-2\",\n \"--layout-effects-stop\",\n \"--commit-stop\",\n ]\n `);\n- });\n-\n- it('should mark render yields', async () => {\n- function Bar() {\n- Scheduler.log('Bar');\n- return null;\n- }\n \n- function Foo() {\n- Scheduler.log('Foo');\n- return ;\n- }\n+ clearPendingMarks();\n \n- React.startTransition(() => {\n- renderRootHelper();\n+ await expect(fakeSuspensePromise).rejects.toThrow();\n+ expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);\n });\n \n- await waitFor(['Foo']);\n+ \/\/ @reactVersion <= 18.2\n+ \/\/ @reactVersion >= 18.0\n+ it('should mark sync render that throws', async () => {\n+ jest.spyOn(console, 'error').mockImplementation(() => {});\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n- [\n- \"--schedule-render-128\",\n- \"--render-start-128\",\n- \"--component-render-start-Foo\",\n- \"--component-render-stop\",\n- \"--render-yield\",\n- ]\n- `);\n- });\n+ class ErrorBoundary extends React.Component {\n+ state = {error: null};\n+ componentDidCatch(error) {\n+ this.setState({error});\n+ }\n+ render() {\n+ if (this.state.error) {\n+ return null;\n+ }\n+ return this.props.children;\n+ }\n+ }\n \n- it('should mark sync render with suspense that resolves', async () => {\n- const fakeSuspensePromise = Promise.resolve(true);\n- function Example() {\n- throw fakeSuspensePromise;\n- }\n+ function ExampleThatThrows() {\n+ throw Error('Expected error');\n+ }\n \n- renderHelper(\n- \n- \n- <\/React.Suspense>,\n- );\n+ legacyRender(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n- \"--schedule-render-2\",\n- \"--render-start-2\",\n- \"--component-render-start-Example\",\n+ \"--schedule-render-1\",\n+ \"--render-start-1\",\n+ \"--component-render-start-ErrorBoundary\",\n \"--component-render-stop\",\n- \"--suspense-suspend-0-Example-mount-2-\",\n+ \"--component-render-start-ExampleThatThrows\",\n+ \"--component-render-start-ExampleThatThrows\",\n+ \"--component-render-stop\",\n+ \"--error-ExampleThatThrows-mount-Expected error\",\n \"--render-stop\",\n- \"--commit-start-2\",\n+ \"--commit-start-1\",\n \"--react-version-\",\n \"--profiler-version-1\",\n \"--react-internal-module-start- at filtered (:0:0)\",\n \"--react-internal-module-stop- at filtered (:1:1)\",\n- \"--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred\",\n- \"--layout-effects-start-2\",\n+ \"--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen\",\n+ \"--layout-effects-start-1\",\n+ \"--schedule-state-update-1-ErrorBoundary\",\n \"--layout-effects-stop\",\n \"--commit-stop\",\n+ \"--render-start-1\",\n+ \"--component-render-start-ErrorBoundary\",\n+ \"--component-render-stop\",\n+ \"--render-stop\",\n+ \"--commit-start-1\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen\",\n+ \"--commit-stop\",\n ]\n `);\n+ });\n+ });\n \n- clearPendingMarks();\n+ describe('with createRoot', () => {\n+ let waitFor;\n+ let waitForAll;\n+ let waitForPaint;\n+ let assertLog;\n \n- await fakeSuspensePromise;\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- [\n- \"--suspense-resolved-0-Example\",\n- ]\n- `);\n- });\n+ beforeEach(() => {\n+ const InternalTestUtils = require('internal-test-utils');\n+ waitFor = InternalTestUtils.waitFor;\n+ waitForAll = InternalTestUtils.waitForAll;\n+ waitForPaint = InternalTestUtils.waitForPaint;\n+ assertLog = InternalTestUtils.assertLog;\n+ });\n \n- it('should mark sync render with suspense that rejects', async () => {\n- const fakeSuspensePromise = Promise.reject(new Error('error'));\n- function Example() {\n- throw fakeSuspensePromise;\n- }\n+ const {render: modernRender} = getModernRenderImplementation();\n \n- renderHelper(\n- \n- \n- <\/React.Suspense>,\n- );\n+ it('should mark concurrent render without suspends or state updates', async () => {\n+ modernRender(

);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n- \"--schedule-render-2\",\n- \"--render-start-2\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--suspense-suspend-0-Example-mount-2-\",\n+ \"--schedule-render-32\",\n+ ]\n+ `);\n+\n+ clearPendingMarks();\n+\n+ await waitForPaint([]);\n+\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ [\n+ \"--render-start-32\",\n \"--render-stop\",\n- \"--commit-start-2\",\n+ \"--commit-start-32\",\n \"--react-version-\",\n \"--profiler-version-1\",\n \"--react-internal-module-start- at filtered (:0:0)\",\n \"--react-internal-module-stop- at filtered (:1:1)\",\n \"--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred\",\n- \"--layout-effects-start-2\",\n+ \"--layout-effects-start-32\",\n \"--layout-effects-stop\",\n \"--commit-stop\",\n ]\n `);\n+ });\n \n- clearPendingMarks();\n+ it('should mark render yields', async () => {\n+ function Bar() {\n+ Scheduler.log('Bar');\n+ return null;\n+ }\n \n- await expect(fakeSuspensePromise).rejects.toThrow();\n- expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);\n- });\n+ function Foo() {\n+ Scheduler.log('Foo');\n+ return ;\n+ }\n+\n+ React.startTransition(() => {\n+ modernRender();\n+ });\n \n- it('should mark concurrent render with suspense that resolves', async () => {\n- let resolveFakePromise;\n- const fakeSuspensePromise = new Promise(\n- resolve => (resolveFakePromise = resolve),\n- );\n+ await waitFor(['Foo']);\n \n- function Example() {\n- throw fakeSuspensePromise;\n- }\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ [\n+ \"--schedule-render-128\",\n+ \"--render-start-128\",\n+ \"--component-render-start-Foo\",\n+ \"--component-render-stop\",\n+ \"--render-yield\",\n+ ]\n+ `);\n+ });\n+\n+ it('should mark concurrent render with suspense that resolves', async () => {\n+ let resolveFakePromise;\n+ const fakeSuspensePromise = new Promise(\n+ resolve => (resolveFakePromise = resolve),\n+ );\n+\n+ function Example() {\n+ throw fakeSuspensePromise;\n+ }\n \n- renderRootHelper(\n- \n- \n- <\/React.Suspense>,\n- );\n+ modernRender(\n+ \n+ \n+ <\/React.Suspense>,\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await waitForPaint([]);\n+ await waitForPaint([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--render-start-32\",\n \"--component-render-start-Example\",\n@@ -344,43 +408,43 @@ describe('Timeline profiler', () => {\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await resolveFakePromise();\n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ await resolveFakePromise();\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--suspense-resolved-0-Example\",\n ]\n `);\n- });\n+ });\n \n- it('should mark concurrent render with suspense that rejects', async () => {\n- let rejectFakePromise;\n- const fakeSuspensePromise = new Promise(\n- (_, reject) => (rejectFakePromise = reject),\n- );\n+ it('should mark concurrent render with suspense that rejects', async () => {\n+ let rejectFakePromise;\n+ const fakeSuspensePromise = new Promise(\n+ (_, reject) => (rejectFakePromise = reject),\n+ );\n \n- function Example() {\n- throw fakeSuspensePromise;\n- }\n+ function Example() {\n+ throw fakeSuspensePromise;\n+ }\n \n- renderRootHelper(\n- \n- \n- <\/React.Suspense>,\n- );\n+ modernRender(\n+ \n+ \n+ <\/React.Suspense>,\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await waitForPaint([]);\n+ await waitForPaint([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--render-start-32\",\n \"--component-render-start-Example\",\n@@ -399,43 +463,43 @@ describe('Timeline profiler', () => {\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await expect(() => {\n- rejectFakePromise(new Error('error'));\n- return fakeSuspensePromise;\n- }).rejects.toThrow();\n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ await expect(() => {\n+ rejectFakePromise(new Error('error'));\n+ return fakeSuspensePromise;\n+ }).rejects.toThrow();\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--suspense-rejected-0-Example\",\n ]\n `);\n- });\n+ });\n \n- it('should mark cascading class component state updates', async () => {\n- class Example extends React.Component {\n- state = {didMount: false};\n- componentDidMount() {\n- this.setState({didMount: true});\n- }\n- render() {\n- return null;\n+ it('should mark cascading class component state updates', async () => {\n+ class Example extends React.Component {\n+ state = {didMount: false};\n+ componentDidMount() {\n+ this.setState({didMount: true});\n+ }\n+ render() {\n+ return null;\n+ }\n }\n- }\n \n- renderRootHelper();\n+ modernRender();\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await waitForPaint([]);\n+ await waitForPaint([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--render-start-32\",\n \"--component-render-start-Example\",\n@@ -464,31 +528,31 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n- });\n+ });\n \n- it('should mark cascading class component force updates', async () => {\n- class Example extends React.Component {\n- componentDidMount() {\n- this.forceUpdate();\n- }\n- render() {\n- return null;\n+ it('should mark cascading class component force updates', async () => {\n+ class Example extends React.Component {\n+ componentDidMount() {\n+ this.forceUpdate();\n+ }\n+ render() {\n+ return null;\n+ }\n }\n- }\n \n- renderRootHelper();\n+ modernRender();\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await waitForPaint([]);\n+ await waitForPaint([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--render-start-32\",\n \"--component-render-start-Example\",\n@@ -517,42 +581,42 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n- });\n+ });\n \n- it('should mark render phase state updates for class component', async () => {\n- class Example extends React.Component {\n- state = {didRender: false};\n- render() {\n- if (this.state.didRender === false) {\n- this.setState({didRender: true});\n+ it('should mark render phase state updates for class component', async () => {\n+ class Example extends React.Component {\n+ state = {didRender: false};\n+ render() {\n+ if (this.state.didRender === false) {\n+ this.setState({didRender: true});\n+ }\n+ return null;\n }\n- return null;\n }\n- }\n \n- renderRootHelper();\n+ modernRender();\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- let errorMessage;\n- jest.spyOn(console, 'error').mockImplementation(message => {\n- errorMessage = message;\n- });\n+ let errorMessage;\n+ jest.spyOn(console, 'error').mockImplementation(message => {\n+ errorMessage = message;\n+ });\n \n- await waitForPaint([]);\n+ await waitForPaint([]);\n \n- expect(console.error).toHaveBeenCalledTimes(1);\n- expect(errorMessage).toContain(\n- 'Cannot update during an existing state transition',\n- );\n+ expect(console.error).toHaveBeenCalledTimes(1);\n+ expect(errorMessage).toContain(\n+ 'Cannot update during an existing state transition',\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--render-start-32\",\n \"--component-render-start-Example\",\n@@ -570,43 +634,43 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n- });\n+ });\n \n- it('should mark render phase force updates for class component', async () => {\n- let forced = false;\n- class Example extends React.Component {\n- render() {\n- if (!forced) {\n- forced = true;\n- this.forceUpdate();\n- }\n- return null;\n+ it('should mark render phase force updates for class component', async () => {\n+ let forced = false;\n+ class Example extends React.Component {\n+ render() {\n+ if (!forced) {\n+ forced = true;\n+ this.forceUpdate();\n+ }\n+ return null;\n+ }\n }\n- }\n \n- renderRootHelper();\n+ modernRender();\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- let errorMessage;\n- jest.spyOn(console, 'error').mockImplementation(message => {\n- errorMessage = message;\n- });\n+ let errorMessage;\n+ jest.spyOn(console, 'error').mockImplementation(message => {\n+ errorMessage = message;\n+ });\n \n- await waitForPaint([]);\n+ await waitForPaint([]);\n \n- expect(console.error).toHaveBeenCalledTimes(1);\n- expect(errorMessage).toContain(\n- 'Cannot update during an existing state transition',\n- );\n+ expect(console.error).toHaveBeenCalledTimes(1);\n+ expect(errorMessage).toContain(\n+ 'Cannot update during an existing state transition',\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--render-start-32\",\n \"--component-render-start-Example\",\n@@ -624,30 +688,30 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n- });\n+ });\n \n- it('should mark cascading layout updates', async () => {\n- function Example() {\n- const [didMount, setDidMount] = React.useState(false);\n- React.useLayoutEffect(() => {\n- setDidMount(true);\n- }, []);\n- return didMount;\n- }\n+ it('should mark cascading layout updates', async () => {\n+ function Example() {\n+ const [didMount, setDidMount] = React.useState(false);\n+ React.useLayoutEffect(() => {\n+ setDidMount(true);\n+ }, []);\n+ return didMount;\n+ }\n \n- renderRootHelper();\n+ modernRender();\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await waitForPaint([]);\n+ await waitForPaint([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--render-start-32\",\n \"--component-render-start-Example\",\n@@ -678,22 +742,22 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n- });\n+ });\n \n- it('should mark cascading passive updates', async () => {\n- function Example() {\n- const [didMount, setDidMount] = React.useState(false);\n- React.useEffect(() => {\n- setDidMount(true);\n- }, []);\n- return didMount;\n- }\n+ it('should mark cascading passive updates', async () => {\n+ function Example() {\n+ const [didMount, setDidMount] = React.useState(false);\n+ React.useEffect(() => {\n+ setDidMount(true);\n+ }, []);\n+ return didMount;\n+ }\n \n- renderRootHelper();\n+ modernRender();\n \n- await waitForAll([]);\n+ await waitForAll([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n \"--render-start-32\",\n@@ -727,22 +791,22 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n- });\n+ });\n \n- it('should mark render phase updates', async () => {\n- function Example() {\n- const [didRender, setDidRender] = React.useState(false);\n- if (!didRender) {\n- setDidRender(true);\n+ it('should mark render phase updates', async () => {\n+ function Example() {\n+ const [didRender, setDidRender] = React.useState(false);\n+ if (!didRender) {\n+ setDidRender(true);\n+ }\n+ return didRender;\n }\n- return didRender;\n- }\n \n- renderRootHelper();\n+ modernRender();\n \n- await waitForAll([]);\n+ await waitForAll([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n \"--render-start-32\",\n@@ -761,108 +825,46 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n- });\n+ });\n \n- it('should mark sync render that throws', async () => {\n- jest.spyOn(console, 'error').mockImplementation(() => {});\n+ it('should mark concurrent render that throws', async () => {\n+ jest.spyOn(console, 'error').mockImplementation(() => {});\n \n- class ErrorBoundary extends React.Component {\n- state = {error: null};\n- componentDidCatch(error) {\n- this.setState({error});\n- }\n- render() {\n- if (this.state.error) {\n- return null;\n+ class ErrorBoundary extends React.Component {\n+ state = {error: null};\n+ componentDidCatch(error) {\n+ this.setState({error});\n }\n- return this.props.children;\n- }\n- }\n-\n- function ExampleThatThrows() {\n- throw Error('Expected error');\n- }\n-\n- renderHelper(\n- \n- \n- <\/ErrorBoundary>,\n- );\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- [\n- \"--schedule-render-2\",\n- \"--render-start-2\",\n- \"--component-render-start-ErrorBoundary\",\n- \"--component-render-stop\",\n- \"--component-render-start-ExampleThatThrows\",\n- \"--component-render-start-ExampleThatThrows\",\n- \"--component-render-stop\",\n- \"--error-ExampleThatThrows-mount-Expected error\",\n- \"--render-stop\",\n- \"--commit-start-2\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start- at filtered (:0:0)\",\n- \"--react-internal-module-stop- at filtered (:1:1)\",\n- \"--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred\",\n- \"--layout-effects-start-2\",\n- \"--schedule-state-update-2-ErrorBoundary\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- \"--render-start-2\",\n- \"--component-render-start-ErrorBoundary\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-2\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start- at filtered (:0:0)\",\n- \"--react-internal-module-stop- at filtered (:1:1)\",\n- \"--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n-\n- it('should mark concurrent render that throws', async () => {\n- jest.spyOn(console, 'error').mockImplementation(() => {});\n-\n- class ErrorBoundary extends React.Component {\n- state = {error: null};\n- componentDidCatch(error) {\n- this.setState({error});\n- }\n- render() {\n- if (this.state.error) {\n- return null;\n+ render() {\n+ if (this.state.error) {\n+ return null;\n+ }\n+ return this.props.children;\n }\n- return this.props.children;\n }\n- }\n \n- function ExampleThatThrows() {\n- \/\/ eslint-disable-next-line no-throw-literal\n- throw 'Expected error';\n- }\n+ function ExampleThatThrows() {\n+ \/\/ eslint-disable-next-line no-throw-literal\n+ throw 'Expected error';\n+ }\n \n- renderRootHelper(\n- \n- \n- <\/ErrorBoundary>,\n- );\n+ modernRender(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await waitForPaint([]);\n+ await waitForPaint([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--render-start-32\",\n \"--component-render-start-ErrorBoundary\",\n@@ -903,53 +905,53 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n- });\n+ });\n \n- it('should mark passive and layout effects', async () => {\n- function ComponentWithEffects() {\n- React.useLayoutEffect(() => {\n- Scheduler.log('layout 1 mount');\n- return () => {\n- Scheduler.log('layout 1 unmount');\n- };\n- }, []);\n-\n- React.useEffect(() => {\n- Scheduler.log('passive 1 mount');\n- return () => {\n- Scheduler.log('passive 1 unmount');\n- };\n- }, []);\n-\n- React.useLayoutEffect(() => {\n- Scheduler.log('layout 2 mount');\n- return () => {\n- Scheduler.log('layout 2 unmount');\n- };\n- }, []);\n-\n- React.useEffect(() => {\n- Scheduler.log('passive 2 mount');\n- return () => {\n- Scheduler.log('passive 2 unmount');\n- };\n- }, []);\n-\n- React.useEffect(() => {\n- Scheduler.log('passive 3 mount');\n- return () => {\n- Scheduler.log('passive 3 unmount');\n- };\n- }, []);\n+ it('should mark passive and layout effects', async () => {\n+ function ComponentWithEffects() {\n+ React.useLayoutEffect(() => {\n+ Scheduler.log('layout 1 mount');\n+ return () => {\n+ Scheduler.log('layout 1 unmount');\n+ };\n+ }, []);\n \n- return null;\n- }\n+ React.useEffect(() => {\n+ Scheduler.log('passive 1 mount');\n+ return () => {\n+ Scheduler.log('passive 1 unmount');\n+ };\n+ }, []);\n+\n+ React.useLayoutEffect(() => {\n+ Scheduler.log('layout 2 mount');\n+ return () => {\n+ Scheduler.log('layout 2 unmount');\n+ };\n+ }, []);\n+\n+ React.useEffect(() => {\n+ Scheduler.log('passive 2 mount');\n+ return () => {\n+ Scheduler.log('passive 2 unmount');\n+ };\n+ }, []);\n+\n+ React.useEffect(() => {\n+ Scheduler.log('passive 3 mount');\n+ return () => {\n+ Scheduler.log('passive 3 unmount');\n+ };\n+ }, []);\n+\n+ return null;\n+ }\n \n- const unmount = renderRootHelper();\n+ const unmount = modernRender();\n \n- await waitForPaint(['layout 1 mount', 'layout 2 mount']);\n+ await waitForPaint(['layout 1 mount', 'layout 2 mount']);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n \"--render-start-32\",\n@@ -972,15 +974,15 @@ describe('Timeline profiler', () => {\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await waitForAll([\n- 'passive 1 mount',\n- 'passive 2 mount',\n- 'passive 3 mount',\n- ]);\n+ await waitForAll([\n+ 'passive 1 mount',\n+ 'passive 2 mount',\n+ 'passive 3 mount',\n+ ]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--passive-effects-start-32\",\n \"--component-passive-effect-mount-start-ComponentWithEffects\",\n@@ -993,21 +995,21 @@ describe('Timeline profiler', () => {\n ]\n `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- await waitForAll([]);\n+ await waitForAll([]);\n \n- unmount();\n+ unmount();\n \n- assertLog([\n- 'layout 1 unmount',\n- 'layout 2 unmount',\n- 'passive 1 unmount',\n- 'passive 2 unmount',\n- 'passive 3 unmount',\n- ]);\n+ assertLog([\n+ 'layout 1 unmount',\n+ 'layout 2 unmount',\n+ 'passive 1 unmount',\n+ 'passive 2 unmount',\n+ 'passive 3 unmount',\n+ ]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-2\",\n \"--render-start-2\",\n@@ -1035,61 +1037,78 @@ describe('Timeline profiler', () => {\n \"--commit-stop\",\n ]\n `);\n+ });\n });\n \n describe('lane labels', () => {\n- it('regression test SyncLane', () => {\n- renderHelper(

);\n+ describe('with legacy render', () => {\n+ const {render: legacyRender} = getLegacyRenderImplementation();\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ \/\/ @reactVersion <= 18.2\n+ \/\/ @reactVersion >= 18.0\n+ it('regression test SyncLane', () => {\n+ legacyRender(

);\n+\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n- \"--schedule-render-2\",\n- \"--render-start-2\",\n+ \"--schedule-render-1\",\n+ \"--render-start-1\",\n \"--render-stop\",\n- \"--commit-start-2\",\n+ \"--commit-start-1\",\n \"--react-version-\",\n \"--profiler-version-1\",\n \"--react-internal-module-start- at filtered (:0:0)\",\n \"--react-internal-module-stop- at filtered (:1:1)\",\n- \"--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred\",\n- \"--layout-effects-start-2\",\n+ \"--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen\",\n+ \"--layout-effects-start-1\",\n \"--layout-effects-stop\",\n \"--commit-stop\",\n ]\n `);\n+ });\n });\n \n- it('regression test DefaultLane', () => {\n- renderRootHelper(

);\n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ describe('with createRoot()', () => {\n+ let waitForAll;\n+\n+ beforeEach(() => {\n+ const InternalTestUtils = require('internal-test-utils');\n+ waitForAll = InternalTestUtils.waitForAll;\n+ });\n+\n+ const {render: modernRender} = getModernRenderImplementation();\n+\n+ it('regression test DefaultLane', () => {\n+ modernRender(

);\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n [\n \"--schedule-render-32\",\n ]\n `);\n- });\n+ });\n \n- it('regression test InputDiscreteLane', async () => {\n- const targetRef = React.createRef(null);\n+ it('regression test InputDiscreteLane', async () => {\n+ const targetRef = React.createRef(null);\n \n- function App() {\n- const [count, setCount] = React.useState(0);\n- const handleClick = () => {\n- setCount(count + 1);\n- };\n- return

dillon1000/react

Files changed