Remove RTR from ReactProfiler-test (#28407)
## Summary Internal cleanup of ReactTestRenderer ## How did you test this change? `yarn test packages/react/src/__tests__/ReactProfiler-test.internal.js`
Jack Pope committed
Mar 11, 2024 at 15:07 UTC
eebdbf4454e3791bd3fc4b0c7186cdee581863cf
3 files changed
+466
-400
packages/react/src/__tests__/ReactProfiler-test.internal.js
+321
-344
@@ -14,7 +14,6 @@ let React;
14
let ReactFeatureFlags;
15
let ReactNoop;
16
let Scheduler;
17
-let ReactTestRenderer;
17
let act;
18
let AdvanceTime;
19
let assertLog;
@@ -27,7 +26,6 @@ function loadModules({
26
enableProfilerCommitHooks = true,
27
enableProfilerNestedUpdatePhase = true,
28
replayFailedUnitOfWorkWithInvokeGuardedCallback = false,
30
- useNoopRenderer = false,
29
} = {}) {
30
ReactFeatureFlags = require('shared/ReactFeatureFlags');
31
@@ -40,17 +38,9 @@ function loadModules({
38
39
React = require('react');
40
Scheduler = require('scheduler');
43
- act = require('internal-test-utils').act;
44
-
45
- if (useNoopRenderer) {
46
- ReactNoop = require('react-noop-renderer');
47
- ReactTestRenderer = null;
48
- } else {
49
- ReactNoop = null;
50
- ReactTestRenderer = require('react-test-renderer');
51
- }
52
-
41
+ ReactNoop = require('react-noop-renderer');
42
const InternalTestUtils = require('internal-test-utils');
43
+ act = InternalTestUtils.act;
44
assertLog = InternalTestUtils.assertLog;
45
waitFor = InternalTestUtils.waitFor;
46
waitForAll = InternalTestUtils.waitForAll;
@@ -72,96 +62,13 @@ function loadModules({
62
};
63
}
64
75
-describe('Profiler', () => {
76
- describe('works in profiling and non-profiling bundles', () => {
77
- [true, false].forEach(enableProfilerTimer => {
78
- describe(`enableProfilerTimer:${
79
- enableProfilerTimer ? 'enabled' : 'disabled'
80
- }`, () => {
81
- beforeEach(() => {
82
- jest.resetModules();
83
-
84
- loadModules({enableProfilerTimer});
85
- });
86
-
87
- // This will throw in production too,
88
- // But the test is only interested in verifying the DEV error message.
89
- if (__DEV__ && enableProfilerTimer) {
90
- it('should warn if required params are missing', () => {
91
- expect(() => {
92
- ReactTestRenderer.create(<React.Profiler />);
93
- }).toErrorDev(
94
- 'Profiler must specify an "id" of type `string` as a prop. Received the type `undefined` instead.',
95
- {
96
- withoutStack: true,
97
- },
98
- );
99
- });
100
- }
101
-
102
- it('should support an empty Profiler (with no children)', () => {
103
- // As root
104
- expect(
105
- ReactTestRenderer.create(
106
- <React.Profiler id="label" onRender={jest.fn()} />,
107
- ).toJSON(),
108
- ).toMatchSnapshot();
109
-
110
- // As non-root
111
- expect(
112
- ReactTestRenderer.create(
113
- <div>
114
- <React.Profiler id="label" onRender={jest.fn()} />
115
- </div>,
116
- ).toJSON(),
117
- ).toMatchSnapshot();
118
- });
119
-
120
- it('should render children', () => {
121
- const FunctionComponent = ({label}) => <span>{label}</span>;
122
- const renderer = ReactTestRenderer.create(
123
- <div>
124
- <span>outside span</span>
125
- <React.Profiler id="label" onRender={jest.fn()}>
126
- <span>inside span</span>
127
- <FunctionComponent label="function component" />
128
- </React.Profiler>
129
- </div>,
130
- );
131
- expect(renderer.toJSON()).toMatchSnapshot();
132
- });
133
-
134
- it('should support nested Profilers', () => {
135
- const FunctionComponent = ({label}) => <div>{label}</div>;
136
- class ClassComponent extends React.Component {
137
- render() {
138
- return <block>{this.props.label}</block>;
139
- }
140
- }
141
- const renderer = ReactTestRenderer.create(
142
- <React.Profiler id="outer" onRender={jest.fn()}>
143
- <FunctionComponent label="outer function component" />
144
- <React.Profiler id="inner" onRender={jest.fn()}>
145
- <ClassComponent label="inner class component" />
146
- <span>inner span</span>
147
- </React.Profiler>
148
- </React.Profiler>,
149
- );
150
- expect(renderer.toJSON()).toMatchSnapshot();
151
- });
152
- });
153
- });
154
- });
155
-});
156
-
65
describe(`onRender`, () => {
66
beforeEach(() => {
67
jest.resetModules();
160
-
68
loadModules();
69
});
70
164
- it('should handle errors thrown', () => {
71
+ it('should handle errors thrown', async () => {
72
const callback = jest.fn(id => {
73
if (id === 'throw') {
74
throw Error('expected');
@@ -180,17 +87,19 @@ describe(`onRender`, () => {
87
88
// Errors thrown from onRender should not break the commit phase,
89
// Or prevent other lifecycles from being called.
183
- expect(() =>
184
- ReactTestRenderer.create(
185
- <ClassComponent>
186
- <React.Profiler id="do-not-throw" onRender={callback}>
187
- <React.Profiler id="throw" onRender={callback}>
188
- <div />
90
+ await expect(
91
+ act(() => {
92
+ ReactNoop.render(
93
+ <ClassComponent>
94
+ <React.Profiler id="do-not-throw" onRender={callback}>
95
+ <React.Profiler id="throw" onRender={callback}>
96
+ <div />
97
+ </React.Profiler>
98
</React.Profiler>
190
- </React.Profiler>
191
- </ClassComponent>,
192
- ),
193
- ).toThrow('expected');
99
+ </ClassComponent>,
100
+ );
101
+ }),
102
+ ).rejects.toThrow('expected');
103
expect(didMount).toBe(true);
104
expect(callback).toHaveBeenCalledTimes(2);
105
});
@@ -204,14 +113,11 @@ describe(`onRender`, () => {
113
};
114
115
React.startTransition(() => {
207
- ReactTestRenderer.create(
116
+ ReactNoop.render(
117
<React.Profiler id="test" onRender={callback}>
118
<Yield value="first" />
119
<Yield value="last" />
120
</React.Profiler>,
212
- {
213
- isConcurrent: true,
214
- },
121
);
122
});
123
@@ -222,7 +128,7 @@ describe(`onRender`, () => {
128
expect(callback).toHaveBeenCalledTimes(1);
129
});
130
225
- it('does not record times for components outside of Profiler tree', () => {
131
+ it('does not record times for components outside of Profiler tree', async () => {
132
// Mock the Scheduler module so we can track how many times the current
133
// time is read
134
jest.mock('scheduler', obj => {
@@ -243,15 +149,17 @@ describe(`onRender`, () => {
149
// Clear yields in case the current time is read during initialization.
150
Scheduler.unstable_clearLog();
151
246
- ReactTestRenderer.create(
247
- <div>
248
- <AdvanceTime />
249
- <AdvanceTime />
250
- <AdvanceTime />
251
- <AdvanceTime />
252
- <AdvanceTime />
253
- </div>,
254
- );
152
+ await act(() => {
153
+ ReactNoop.render(
154
+ <div>
155
+ <AdvanceTime />
156
+ <AdvanceTime />
157
+ <AdvanceTime />
158
+ <AdvanceTime />
159
+ <AdvanceTime />
160
+ </div>,
161
+ );
162
+ });
163
164
// Restore original mock
165
jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
@@ -259,7 +167,12 @@ describe(`onRender`, () => {
167
// TODO: unstable_now is called by more places than just the profiler.
168
// Rewrite this test so it's less fragile.
169
if (gate(flags => flags.enableDeferRootSchedulingToMicrotask)) {
262
- assertLog(['read current time', 'read current time']);
170
+ assertLog([
171
+ 'read current time',
172
+ 'read current time',
173
+ 'read current time',
174
+ 'read current time',
175
+ ]);
176
} else {
177
assertLog([
178
'read current time',
@@ -267,6 +180,9 @@ describe(`onRender`, () => {
180
'read current time',
181
'read current time',
182
'read current time',
183
+ 'read current time',
184
+ 'read current time',
185
+ 'read current time',
186
]);
187
}
188
});
@@ -301,7 +217,10 @@ describe(`onRender`, () => {
217
);
218
}
219
304
- const renderer = ReactTestRenderer.create(<App />);
220
+ const root = ReactNoop.createRoot();
221
+ await act(() => {
222
+ root.render(<App />);
223
+ });
224
225
expect(callback).toHaveBeenCalledTimes(1);
226
@@ -319,7 +238,9 @@ describe(`onRender`, () => {
238
239
Scheduler.unstable_advanceTime(20); // 10 -> 30
240
322
- renderer.update(<App />);
241
+ await act(() => {
242
+ root.render(<App />);
243
+ });
244
245
if (gate(flags => flags.enableUseJSStackToTrackPassiveDurations)) {
246
// None of the Profiler's subtree was rendered because App bailed out before the Profiler.
@@ -352,16 +273,19 @@ describe(`onRender`, () => {
273
expect(callback).not.toHaveBeenCalled();
274
});
275
355
- it('logs render times for both mount and update', () => {
276
+ it('logs render times for both mount and update', async () => {
277
const callback = jest.fn();
278
279
Scheduler.unstable_advanceTime(5); // 0 -> 5
280
360
- const renderer = ReactTestRenderer.create(
361
- <React.Profiler id="test" onRender={callback}>
362
- <AdvanceTime />
363
- </React.Profiler>,
364
- );
281
+ const root = ReactNoop.createRoot();
282
+ await act(() => {
283
+ root.render(
284
+ <React.Profiler id="test" onRender={callback}>
285
+ <AdvanceTime />
286
+ </React.Profiler>,
287
+ );
288
+ });
289
290
expect(callback).toHaveBeenCalledTimes(1);
291
@@ -379,11 +303,13 @@ describe(`onRender`, () => {
303
304
Scheduler.unstable_advanceTime(20); // 15 -> 35
305
382
- renderer.update(
383
- <React.Profiler id="test" onRender={callback}>
384
- <AdvanceTime />
385
- </React.Profiler>,
386
- );
306
+ await act(() => {
307
+ root.render(
308
+ <React.Profiler id="test" onRender={callback}>
309
+ <AdvanceTime />
310
+ </React.Profiler>,
311
+ );
312
+ });
313
314
expect(callback).toHaveBeenCalledTimes(1);
315
@@ -401,11 +327,13 @@ describe(`onRender`, () => {
327
328
Scheduler.unstable_advanceTime(20); // 45 -> 65
329
404
- renderer.update(
405
- <React.Profiler id="test" onRender={callback}>
406
- <AdvanceTime byAmount={4} />
407
- </React.Profiler>,
408
- );
330
+ await act(() => {
331
+ root.render(
332
+ <React.Profiler id="test" onRender={callback}>
333
+ <AdvanceTime byAmount={4} />
334
+ </React.Profiler>,
335
+ );
336
+ });
337
338
expect(callback).toHaveBeenCalledTimes(1);
339
@@ -420,22 +348,25 @@ describe(`onRender`, () => {
348
expect(call[5]).toBe(69); // commit time
349
});
350
423
- it('includes render times of nested Profilers in their parent times', () => {
351
+ it('includes render times of nested Profilers in their parent times', async () => {
352
const callback = jest.fn();
353
354
Scheduler.unstable_advanceTime(5); // 0 -> 5
355
428
- ReactTestRenderer.create(
429
- <React.Fragment>
430
- <React.Profiler id="parent" onRender={callback}>
431
- <AdvanceTime byAmount={10}>
432
- <React.Profiler id="child" onRender={callback}>
433
- <AdvanceTime byAmount={20} />
434
- </React.Profiler>
435
- </AdvanceTime>
436
- </React.Profiler>
437
- </React.Fragment>,
438
- );
356
+ const root = ReactNoop.createRoot();
357
+ await act(() => {
358
+ root.render(
359
+ <React.Fragment>
360
+ <React.Profiler id="parent" onRender={callback}>
361
+ <AdvanceTime byAmount={10}>
362
+ <React.Profiler id="child" onRender={callback}>
363
+ <AdvanceTime byAmount={20} />
364
+ </React.Profiler>
365
+ </AdvanceTime>
366
+ </React.Profiler>
367
+ </React.Fragment>,
368
+ );
369
+ });
370
371
expect(callback).toHaveBeenCalledTimes(2);
372
@@ -455,21 +386,24 @@ describe(`onRender`, () => {
386
expect(parentCall[5]).toBe(35); // commit time
387
});
388
458
- it('traces sibling Profilers separately', () => {
389
+ it('traces sibling Profilers separately', async () => {
390
const callback = jest.fn();
391
392
Scheduler.unstable_advanceTime(5); // 0 -> 5
393
463
- ReactTestRenderer.create(
464
- <React.Fragment>
465
- <React.Profiler id="first" onRender={callback}>
466
- <AdvanceTime byAmount={20} />
467
- </React.Profiler>
468
- <React.Profiler id="second" onRender={callback}>
469
- <AdvanceTime byAmount={5} />
470
- </React.Profiler>
471
- </React.Fragment>,
472
- );
394
+ const root = ReactNoop.createRoot();
395
+ await act(() => {
396
+ root.render(
397
+ <React.Fragment>
398
+ <React.Profiler id="first" onRender={callback}>
399
+ <AdvanceTime byAmount={20} />
400
+ </React.Profiler>
401
+ <React.Profiler id="second" onRender={callback}>
402
+ <AdvanceTime byAmount={5} />
403
+ </React.Profiler>
404
+ </React.Fragment>,
405
+ );
406
+ });
407
408
expect(callback).toHaveBeenCalledTimes(2);
409
@@ -488,20 +422,23 @@ describe(`onRender`, () => {
422
expect(secondCall[5]).toBe(30); // commit time
423
});
424
491
- it('does not include time spent outside of profile root', () => {
425
+ it('does not include time spent outside of profile root', async () => {
426
const callback = jest.fn();
427
428
Scheduler.unstable_advanceTime(5); // 0 -> 5
429
496
- ReactTestRenderer.create(
497
- <React.Fragment>
498
- <AdvanceTime byAmount={20} />
499
- <React.Profiler id="test" onRender={callback}>
500
- <AdvanceTime byAmount={5} />
501
- </React.Profiler>
502
- <AdvanceTime byAmount={20} />
503
- </React.Fragment>,
504
- );
430
+ const root = ReactNoop.createRoot();
431
+ await act(() => {
432
+ root.render(
433
+ <React.Fragment>
434
+ <AdvanceTime byAmount={20} />
435
+ <React.Profiler id="test" onRender={callback}>
436
+ <AdvanceTime byAmount={5} />
437
+ </React.Profiler>
438
+ <AdvanceTime byAmount={20} />
439
+ </React.Fragment>,
440
+ );
441
+ });
442
443
expect(callback).toHaveBeenCalledTimes(1);
444
@@ -513,7 +450,7 @@ describe(`onRender`, () => {
450
expect(call[5]).toBe(50); // commit time
451
});
452
516
- it('is not called when blocked by sCU false', () => {
453
+ it('is not called when blocked by sCU false', async () => {
454
const callback = jest.fn();
455
456
let instance;
@@ -525,22 +462,24 @@ describe(`onRender`, () => {
462
}
463
}
464
528
- const renderer = ReactTestRenderer.create(
529
- <React.Profiler id="outer" onRender={callback}>
530
- <Updater>
531
- <React.Profiler id="inner" onRender={callback}>
532
- <div />
533
- </React.Profiler>
534
- </Updater>
535
- </React.Profiler>,
536
- );
537
-
465
+ const root = ReactNoop.createRoot();
466
+ await act(() => {
467
+ root.render(
468
+ <React.Profiler id="outer" onRender={callback}>
469
+ <Updater>
470
+ <React.Profiler id="inner" onRender={callback}>
471
+ <div />
472
+ </React.Profiler>
473
+ </Updater>
474
+ </React.Profiler>,
475
+ );
476
+ });
477
// All profile callbacks are called for initial render
478
expect(callback).toHaveBeenCalledTimes(2);
479
480
callback.mockReset();
481
543
- renderer.unstable_flushSync(() => {
482
+ ReactNoop.flushSync(() => {
483
instance.setState({
484
count: 1,
485
});
@@ -553,30 +492,35 @@ describe(`onRender`, () => {
492
expect(callback.mock.calls[0][0]).toBe('outer');
493
});
494
556
- it('decreases actual time but not base time when sCU prevents an update', () => {
495
+ it('decreases actual time but not base time when sCU prevents an update', async () => {
496
const callback = jest.fn();
497
498
Scheduler.unstable_advanceTime(5); // 0 -> 5
499
561
- const renderer = ReactTestRenderer.create(
562
- <React.Profiler id="test" onRender={callback}>
563
- <AdvanceTime byAmount={10}>
564
- <AdvanceTime byAmount={13} shouldComponentUpdate={false} />
565
- </AdvanceTime>
566
- </React.Profiler>,
567
- );
500
+ const root = ReactNoop.createRoot();
501
+ await act(() => {
502
+ root.render(
503
+ <React.Profiler id="test" onRender={callback}>
504
+ <AdvanceTime byAmount={10}>
505
+ <AdvanceTime byAmount={13} shouldComponentUpdate={false} />
506
+ </AdvanceTime>
507
+ </React.Profiler>,
508
+ );
509
+ });
510
511
expect(callback).toHaveBeenCalledTimes(1);
512
513
Scheduler.unstable_advanceTime(30); // 28 -> 58
514
573
- renderer.update(
574
- <React.Profiler id="test" onRender={callback}>
575
- <AdvanceTime byAmount={4}>
576
- <AdvanceTime byAmount={7} shouldComponentUpdate={false} />
577
- </AdvanceTime>
578
- </React.Profiler>,
579
- );
515
+ await act(() => {
516
+ root.render(
517
+ <React.Profiler id="test" onRender={callback}>
518
+ <AdvanceTime byAmount={4}>
519
+ <AdvanceTime byAmount={7} shouldComponentUpdate={false} />
520
+ </AdvanceTime>
521
+ </React.Profiler>,
522
+ );
523
+ });
524
525
expect(callback).toHaveBeenCalledTimes(2);
526
@@ -595,7 +539,7 @@ describe(`onRender`, () => {
539
expect(updateCall[5]).toBe(62); // commit time
540
});
541
598
- it('includes time spent in render phase lifecycles', () => {
542
+ it('includes time spent in render phase lifecycles', async () => {
543
class WithLifecycles extends React.Component {
544
state = {};
545
static getDerivedStateFromProps() {
@@ -616,19 +560,24 @@ describe(`onRender`, () => {
560
561
Scheduler.unstable_advanceTime(5); // 0 -> 5
562
619
- const renderer = ReactTestRenderer.create(
620
- <React.Profiler id="test" onRender={callback}>
621
- <WithLifecycles />
622
- </React.Profiler>,
623
- );
563
+ const root = ReactNoop.createRoot();
564
+ await act(() => {
565
+ root.render(
566
+ <React.Profiler id="test" onRender={callback}>
567
+ <WithLifecycles />
568
+ </React.Profiler>,
569
+ );
570
+ });
571
572
Scheduler.unstable_advanceTime(15); // 13 -> 28
573
627
- renderer.update(
628
- <React.Profiler id="test" onRender={callback}>
629
- <WithLifecycles />
630
- </React.Profiler>,
631
- );
574
+ await act(() => {
575
+ root.render(
576
+ <React.Profiler id="test" onRender={callback}>
577
+ <WithLifecycles />
578
+ </React.Profiler>,
579
+ );
580
+ });
581
582
expect(callback).toHaveBeenCalledTimes(2);
583
@@ -648,9 +597,8 @@ describe(`onRender`, () => {
597
});
598
599
it('should clear nested-update flag when multiple cascading renders are scheduled', async () => {
651
- loadModules({
652
- useNoopRenderer: true,
653
- });
600
+ jest.resetModules();
601
+ loadModules();
602
603
function Component() {
604
const [didMount, setDidMount] = React.useState(false);
@@ -689,9 +637,8 @@ describe(`onRender`, () => {
637
});
638
639
it('is properly distinguish updates and nested-updates when there is more than sync remaining work', () => {
692
- loadModules({
693
- useNoopRenderer: true,
694
- });
640
+ jest.resetModules();
641
+ loadModules();
642
643
function Component() {
644
const [didMount, setDidMount] = React.useState(false);
@@ -742,14 +689,14 @@ describe(`onRender`, () => {
689
690
Scheduler.unstable_advanceTime(5); // 0 -> 5
691
692
+ const root = ReactNoop.createRoot();
693
// Render partially, but run out of time before completing.
694
React.startTransition(() => {
747
- ReactTestRenderer.create(
695
+ root.render(
696
<React.Profiler id="test" onRender={callback}>
697
<Yield renderTime={2} />
698
<Yield renderTime={3} />
699
</React.Profiler>,
752
- {isConcurrent: true},
700
);
701
});
702
@@ -779,10 +726,11 @@ describe(`onRender`, () => {
726
727
Scheduler.unstable_advanceTime(5); // 0 -> 5
728
729
+ const root = ReactNoop.createRoot();
730
// Render partially, but don't finish.
731
// This partial render should take 5ms of simulated time.
732
React.startTransition(() => {
785
- ReactTestRenderer.create(
733
+ root.render(
734
<React.Profiler id="outer" onRender={callback}>
735
<Yield renderTime={5} />
736
<Yield renderTime={10} />
@@ -790,7 +738,6 @@ describe(`onRender`, () => {
738
<Yield renderTime={17} />
739
</React.Profiler>
740
</React.Profiler>,
793
- {isConcurrent: true},
741
);
742
});
743
@@ -832,16 +779,15 @@ describe(`onRender`, () => {
779
780
Scheduler.unstable_advanceTime(5); // 0 -> 5
781
782
+ const root = ReactNoop.createRoot();
783
// Render a partially update, but don't finish.
784
// This partial render should take 10ms of simulated time.
837
- let renderer;
785
React.startTransition(() => {
839
- renderer = ReactTestRenderer.create(
786
+ root.render(
787
<React.Profiler id="test" onRender={callback}>
788
<Yield renderTime={10} />
789
<Yield renderTime={20} />
790
</React.Profiler>,
844
- {isConcurrent: true},
791
);
792
});
793
@@ -853,8 +799,8 @@ describe(`onRender`, () => {
799
800
// Interrupt with higher priority work.
801
// The interrupted work simulates an additional 5ms of time.
856
- renderer.unstable_flushSync(() => {
857
- renderer.update(
802
+ ReactNoop.flushSync(() => {
803
+ root.render(
804
<React.Profiler id="test" onRender={callback}>
805
<Yield renderTime={5} />
806
</React.Profiler>,
@@ -888,13 +834,12 @@ describe(`onRender`, () => {
834
};
835
836
Scheduler.unstable_advanceTime(5); // 0 -> 5
891
-
892
- const renderer = ReactTestRenderer.create(
837
+ const root = ReactNoop.createRoot();
838
+ root.render(
839
<React.Profiler id="test" onRender={callback}>
840
<Yield renderTime={6} />
841
<Yield renderTime={15} />
842
</React.Profiler>,
897
- {isConcurrent: true},
843
);
844
845
// Render everything initially.
@@ -914,7 +859,7 @@ describe(`onRender`, () => {
859
// Render a partially update, but don't finish.
860
// This partial render should take 3ms of simulated time.
861
React.startTransition(() => {
917
- renderer.update(
862
+ root.render(
863
<React.Profiler id="test" onRender={callback}>
864
<Yield renderTime={3} />
865
<Yield renderTime={5} />
@@ -938,8 +883,8 @@ describe(`onRender`, () => {
883
884
// Interrupt with higher priority work.
885
// The interrupted work simulates an additional 11ms of time.
941
- renderer.unstable_flushSync(() => {
942
- renderer.update(
886
+ ReactNoop.flushSync(() => {
887
+ root.render(
888
<React.Profiler id="test" onRender={callback}>
889
<Yield renderTime={11} />
890
</React.Profiler>,
@@ -994,12 +939,12 @@ describe(`onRender`, () => {
939
940
Scheduler.unstable_advanceTime(5); // 0 -> 5
941
997
- const renderer = ReactTestRenderer.create(
942
+ const root = ReactNoop.createRoot();
943
+ root.render(
944
<React.Profiler id="test" onRender={callback}>
945
<FirstComponent />
946
<SecondComponent />
947
</React.Profiler>,
1002
- {isConcurrent: true},
948
);
949
950
// Render everything initially.
@@ -1036,7 +981,7 @@ describe(`onRender`, () => {
981
982
// Interrupt with higher priority work.
983
// This simulates a total of 37ms of actual render time.
1039
- renderer.unstable_flushSync(() => second.setState({renderTime: 30}));
984
+ ReactNoop.flushSync(() => second.setState({renderTime: 30}));
985
assertLog(['SecondComponent:30', 'Yield:7']);
986
987
// The actual time should include only the most recent render (37ms),
@@ -1082,7 +1027,7 @@ describe(`onRender`, () => {
1027
});
1028
});
1029
1085
- it('should accumulate actual time after an error handled by componentDidCatch()', () => {
1030
+ it('should accumulate actual time after an error handled by componentDidCatch()', async () => {
1031
const callback = jest.fn();
1032
1033
const ThrowsError = ({unused}) => {
@@ -1107,14 +1052,16 @@ describe(`onRender`, () => {
1052
1053
Scheduler.unstable_advanceTime(5); // 0 -> 5
1054
1110
- ReactTestRenderer.create(
1111
- <React.Profiler id="test" onRender={callback}>
1112
- <ErrorBoundary>
1113
- <AdvanceTime byAmount={9} />
1114
- <ThrowsError />
1115
- </ErrorBoundary>
1116
- </React.Profiler>,
1117
- );
1055
+ await act(() => {
1056
+ ReactNoop.render(
1057
+ <React.Profiler id="test" onRender={callback}>
1058
+ <ErrorBoundary>
1059
+ <AdvanceTime byAmount={9} />
1060
+ <ThrowsError />
1061
+ </ErrorBoundary>
1062
+ </React.Profiler>,
1063
+ );
1064
+ });
1065
1066
expect(callback).toHaveBeenCalledTimes(2);
1067
@@ -1130,15 +1077,20 @@ describe(`onRender`, () => {
1077
// base time includes: 2 (ErrorBoundary)
1078
// Since the tree is empty for the initial commit
1079
expect(mountCall[3]).toBe(2);
1133
- // start time
1134
- expect(mountCall[4]).toBe(5);
1135
- // commit time: 5 initially + 14 of work
1080
+ // start time: 5 initially + 14 of work
1081
// Add an additional 3 (ThrowsError) if we replayed the failed work
1137
- expect(mountCall[5]).toBe(
1082
+ expect(mountCall[4]).toBe(
1083
__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
1084
? 22
1085
: 19,
1086
);
1087
+ // commit time: 19 initially + 14 of work
1088
+ // Add an additional 6 (ThrowsError *2) if we replayed the failed work
1089
+ expect(mountCall[5]).toBe(
1090
+ __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
1091
+ ? 39
1092
+ : 33,
1093
+ );
1094
1095
// The update includes the ErrorBoundary and its fallback child
1096
expect(updateCall[1]).toBe('nested-update');
@@ -1149,19 +1101,19 @@ describe(`onRender`, () => {
1101
// start time
1102
expect(updateCall[4]).toBe(
1103
__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
1152
- ? 22
1153
- : 19,
1104
+ ? 39
1105
+ : 33,
1106
);
1155
- // commit time: 19 (startTime) + 2 (ErrorBoundary) + 20 (AdvanceTime)
1156
- // Add an additional 3 (ThrowsError) if we replayed the failed work
1107
+ // commit time: 33 (startTime) + 2 (ErrorBoundary) + 20 (AdvanceTime)
1108
+ // Add an additional 6 (ThrowsError *2) if we replayed the failed work
1109
expect(updateCall[5]).toBe(
1110
__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
1159
- ? 44
1160
- : 41,
1111
+ ? 61
1112
+ : 55,
1113
);
1114
});
1115
1164
- it('should accumulate actual time after an error handled by getDerivedStateFromError()', () => {
1116
+ it('should accumulate actual time after an error handled by getDerivedStateFromError()', async () => {
1117
const callback = jest.fn();
1118
1119
const ThrowsError = ({unused}) => {
@@ -1186,14 +1138,16 @@ describe(`onRender`, () => {
1138
1139
Scheduler.unstable_advanceTime(5); // 0 -> 5
1140
1189
- ReactTestRenderer.create(
1190
- <React.Profiler id="test" onRender={callback}>
1191
- <ErrorBoundary>
1192
- <AdvanceTime byAmount={5} />
1193
- <ThrowsError />
1194
- </ErrorBoundary>
1195
- </React.Profiler>,
1196
- );
1141
+ await act(() => {
1142
+ ReactNoop.render(
1143
+ <React.Profiler id="test" onRender={callback}>
1144
+ <ErrorBoundary>
1145
+ <AdvanceTime byAmount={5} />
1146
+ <ThrowsError />
1147
+ </ErrorBoundary>
1148
+ </React.Profiler>,
1149
+ );
1150
+ });
1151
1152
expect(callback).toHaveBeenCalledTimes(1);
1153
@@ -1210,20 +1164,23 @@ describe(`onRender`, () => {
1164
// base time includes: 2 (ErrorBoundary) + 20 (AdvanceTime)
1165
expect(mountCall[3]).toBe(22);
1166
// start time
1213
- expect(mountCall[4]).toBe(5);
1214
- // commit time
1215
- expect(mountCall[5]).toBe(
1167
+ expect(mountCall[4]).toBe(
1168
__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
1169
? 54
1170
: 44,
1171
);
1172
+ // commit time
1173
+ expect(mountCall[5]).toBe(
1174
+ __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
1175
+ ? 103
1176
+ : 83,
1177
+ );
1178
});
1179
1180
it('should reset the fiber stack correct after a "complete" phase error', async () => {
1181
jest.resetModules();
1182
1183
loadModules({
1226
- useNoopRenderer: true,
1184
replayFailedUnitOfWorkWithInvokeGuardedCallback,
1185
});
1186
@@ -1260,26 +1217,31 @@ describe(`onRender`, () => {
1217
});
1218
});
1219
1263
- it('reflects the most recently rendered id value', () => {
1220
+ it('reflects the most recently rendered id value', async () => {
1221
const callback = jest.fn();
1222
1223
Scheduler.unstable_advanceTime(5); // 0 -> 5
1224
1268
- const renderer = ReactTestRenderer.create(
1269
- <React.Profiler id="one" onRender={callback}>
1270
- <AdvanceTime byAmount={2} />
1271
- </React.Profiler>,
1272
- );
1225
+ const root = ReactNoop.createRoot();
1226
+ await act(() => {
1227
+ root.render(
1228
+ <React.Profiler id="one" onRender={callback}>
1229
+ <AdvanceTime byAmount={2} />
1230
+ </React.Profiler>,
1231
+ );
1232
+ });
1233
1234
expect(callback).toHaveBeenCalledTimes(1);
1235
1236
Scheduler.unstable_advanceTime(20); // 7 -> 27
1237
1278
- renderer.update(
1279
- <React.Profiler id="two" onRender={callback}>
1280
- <AdvanceTime byAmount={1} />
1281
- </React.Profiler>,
1282
- );
1238
+ await act(() => {
1239
+ root.render(
1240
+ <React.Profiler id="two" onRender={callback}>
1241
+ <AdvanceTime byAmount={1} />
1242
+ </React.Profiler>,
1243
+ );
1244
+ });
1245
1246
expect(callback).toHaveBeenCalledTimes(2);
1247
@@ -1298,7 +1260,7 @@ describe(`onRender`, () => {
1260
expect(updateCall[4]).toBe(27); // start time
1261
});
1262
1301
- it('should not be called until after mutations', () => {
1263
+ it('should not be called until after mutations', async () => {
1264
let classComponentMounted = false;
1265
const callback = jest.fn(
1266
(id, phase, actualDuration, baseDuration, startTime, commitTime) => {
@@ -1319,12 +1281,14 @@ describe(`onRender`, () => {
1281
return null;
1282
}
1283
}
1322
-
1323
- ReactTestRenderer.create(
1324
- <React.Profiler id="test" onRender={callback}>
1325
- <ClassComponent />
1326
- </React.Profiler>,
1327
- );
1284
+ const root = ReactNoop.createRoot();
1285
+ await act(() => {
1286
+ root.render(
1287
+ <React.Profiler id="test" onRender={callback}>
1288
+ <ClassComponent />
1289
+ </React.Profiler>,
1290
+ );
1291
+ });
1292
1293
expect(callback).toHaveBeenCalledTimes(1);
1294
});
@@ -1337,7 +1301,7 @@ describe(`onCommit`, () => {
1301
loadModules();
1302
});
1303
1340
- it('should report time spent in layout effects and commit lifecycles', () => {
1304
+ it('should report time spent in layout effects and commit lifecycles', async () => {
1305
const callback = jest.fn();
1306
1307
const ComponentWithEffects = () => {
@@ -1376,13 +1340,15 @@ describe(`onCommit`, () => {
1340
}
1341
1342
Scheduler.unstable_advanceTime(1);
1379
-
1380
- const renderer = ReactTestRenderer.create(
1381
- <React.Profiler id="mount-test" onCommit={callback}>
1382
- <ComponentWithEffects />
1383
- <ComponentWithCommitHooks />
1384
- </React.Profiler>,
1385
- );
1343
+ const root = ReactNoop.createRoot();
1344
+ await act(() => {
1345
+ root.render(
1346
+ <React.Profiler id="mount-test" onCommit={callback}>
1347
+ <ComponentWithEffects />
1348
+ <ComponentWithCommitHooks />
1349
+ </React.Profiler>,
1350
+ );
1351
+ });
1352
1353
expect(callback).toHaveBeenCalledTimes(1);
1354
@@ -1396,12 +1362,14 @@ describe(`onCommit`, () => {
1362
1363
Scheduler.unstable_advanceTime(1);
1364
1399
- renderer.update(
1400
- <React.Profiler id="update-test" onCommit={callback}>
1401
- <ComponentWithEffects />
1402
- <ComponentWithCommitHooks />
1403
- </React.Profiler>,
1404
- );
1365
+ await act(() => {
1366
+ root.render(
1367
+ <React.Profiler id="update-test" onCommit={callback}>
1368
+ <ComponentWithEffects />
1369
+ <ComponentWithCommitHooks />
1370
+ </React.Profiler>,
1371
+ );
1372
+ });
1373
1374
expect(callback).toHaveBeenCalledTimes(2);
1375
@@ -1415,7 +1383,9 @@ describe(`onCommit`, () => {
1383
1384
Scheduler.unstable_advanceTime(1);
1385
1418
- renderer.update(<React.Profiler id="unmount-test" onCommit={callback} />);
1386
+ await act(() => {
1387
+ root.render(<React.Profiler id="unmount-test" onCommit={callback} />);
1388
+ });
1389
1390
expect(callback).toHaveBeenCalledTimes(3);
1391
@@ -1428,7 +1398,7 @@ describe(`onCommit`, () => {
1398
expect(call[3]).toBe(1112030); // commit start time (before mutations or effects)
1399
});
1400
1431
- it('should report time spent in layout effects and commit lifecycles with cascading renders', () => {
1401
+ it('should report time spent in layout effects and commit lifecycles with cascading renders', async () => {
1402
const callback = jest.fn();
1403
1404
const ComponentWithEffects = ({shouldCascade}) => {
@@ -1466,13 +1436,15 @@ describe(`onCommit`, () => {
1436
}
1437
1438
Scheduler.unstable_advanceTime(1);
1469
-
1470
- const renderer = ReactTestRenderer.create(
1471
- <React.Profiler id="mount-test" onCommit={callback}>
1472
- <ComponentWithEffects shouldCascade={true} />
1473
- <ComponentWithCommitHooks />
1474
- </React.Profiler>,
1475
- );
1439
+ const root = ReactNoop.createRoot();
1440
+ await act(() => {
1441
+ root.render(
1442
+ <React.Profiler id="mount-test" onCommit={callback}>
1443
+ <ComponentWithEffects shouldCascade={true} />
1444
+ <ComponentWithCommitHooks />
1445
+ </React.Profiler>,
1446
+ );
1447
+ });
1448
1449
expect(callback).toHaveBeenCalledTimes(2);
1450
@@ -1494,12 +1466,14 @@ describe(`onCommit`, () => {
1466
1467
Scheduler.unstable_advanceTime(1);
1468
1497
- renderer.update(
1498
- <React.Profiler id="update-test" onCommit={callback}>
1499
- <ComponentWithEffects />
1500
- <ComponentWithCommitHooks shouldCascade={true} />
1501
- </React.Profiler>,
1502
- );
1469
+ await act(() => {
1470
+ root.render(
1471
+ <React.Profiler id="update-test" onCommit={callback}>
1472
+ <ComponentWithEffects />
1473
+ <ComponentWithCommitHooks shouldCascade={true} />
1474
+ </React.Profiler>,
1475
+ );
1476
+ });
1477
1478
expect(callback).toHaveBeenCalledTimes(4);
1479
@@ -1520,7 +1494,7 @@ describe(`onCommit`, () => {
1494
expect(call[3]).toBe(3300011272); // commit start time (before mutations or effects)
1495
});
1496
1523
- it('should include time spent in ref callbacks', () => {
1497
+ it('should include time spent in ref callbacks', async () => {
1498
const callback = jest.fn();
1499
1500
const refSetter = ref => {
@@ -1544,11 +1518,14 @@ describe(`onCommit`, () => {
1518
1519
Scheduler.unstable_advanceTime(1);
1520
1547
- const renderer = ReactTestRenderer.create(
1548
- <React.Profiler id="root" onCommit={callback}>
1549
- <Component />
1550
- </React.Profiler>,
1551
- );
1521
+ const root = ReactNoop.createRoot();
1522
+ await act(() => {
1523
+ root.render(
1524
+ <React.Profiler id="root" onCommit={callback}>
1525
+ <Component />
1526
+ </React.Profiler>,
1527
+ );
1528
+ });
1529
1530
expect(callback).toHaveBeenCalledTimes(1);
1531
@@ -1562,7 +1539,9 @@ describe(`onCommit`, () => {
1539
1540
callback.mockClear();
1541
1565
- renderer.update(<React.Profiler id="root" onCommit={callback} />);
1542
+ await act(() => {
1543
+ root.render(<React.Profiler id="root" onCommit={callback} />);
1544
+ });
1545
1546
expect(callback).toHaveBeenCalledTimes(1);
1547
@@ -1595,9 +1574,9 @@ describe(`onCommit`, () => {
1574
1575
const setCountRef = React.createRef(null);
1576
1598
- let renderer = null;
1577
+ const root = ReactNoop.createRoot();
1578
await act(() => {
1600
- renderer = ReactTestRenderer.create(
1579
+ root.render(
1580
<React.Profiler id="root-mount" onCommit={callback}>
1581
<React.Profiler id="a">
1582
<ComponentWithEffects
@@ -1636,7 +1615,7 @@ describe(`onCommit`, () => {
1615
expect(call[3]).toBe(1013); // commit start time (before mutations or effects)
1616
1617
await act(() => {
1639
- renderer.update(
1618
+ root.render(
1619
<React.Profiler id="root-update" onCommit={callback}>
1620
<React.Profiler id="b">
1621
<ComponentWithEffects duration={1000} cleanupDuration={10000} />
@@ -1694,8 +1673,9 @@ describe(`onCommit`, () => {
1673
1674
// Test an error that happens during an effect
1675
1676
+ const root = ReactNoop.createRoot();
1677
await act(() => {
1698
- ReactTestRenderer.create(
1678
+ root.render(
1679
<React.Profiler id="root" onCommit={callback}>
1680
<ErrorBoundary
1681
fallback={
@@ -1778,10 +1758,9 @@ describe(`onCommit`, () => {
1758
1759
Scheduler.unstable_advanceTime(1);
1760
1781
- let renderer = null;
1782
-
1761
+ const root = ReactNoop.createRoot();
1762
await act(() => {
1784
- renderer = ReactTestRenderer.create(
1763
+ root.render(
1764
<React.Profiler id="root" onCommit={callback}>
1765
<ErrorBoundary
1766
fallback={
@@ -1823,7 +1802,7 @@ describe(`onCommit`, () => {
1802
// Test an error that happens during an cleanup function
1803
1804
await act(() => {
1826
- renderer.update(
1805
+ root.render(
1806
<React.Profiler id="root" onCommit={callback}>
1807
<ErrorBoundary
1808
fallback={
@@ -1906,9 +1885,9 @@ describe(`onPostCommit`, () => {
1885
1886
Scheduler.unstable_advanceTime(1);
1887
1909
- let renderer;
1888
+ const root = ReactNoop.createRoot();
1889
await act(() => {
1911
- renderer = ReactTestRenderer.create(
1890
+ root.render(
1891
<React.Profiler id="mount-test" onPostCommit={callback}>
1892
<ComponentWithEffects />
1893
</React.Profiler>,
@@ -1929,7 +1908,7 @@ describe(`onPostCommit`, () => {
1908
Scheduler.unstable_advanceTime(1);
1909
1910
await act(() => {
1932
- renderer.update(
1911
+ root.render(
1912
<React.Profiler id="update-test" onPostCommit={callback}>
1913
<ComponentWithEffects />
1914
</React.Profiler>,
@@ -1950,9 +1929,7 @@ describe(`onPostCommit`, () => {
1929
Scheduler.unstable_advanceTime(1);
1930
1931
await act(() => {
1953
- renderer.update(
1954
- <React.Profiler id="unmount-test" onPostCommit={callback} />,
1955
- );
1932
+ root.render(<React.Profiler id="unmount-test" onPostCommit={callback} />);
1933
});
1934
await waitForAll([]);
1935
@@ -1991,8 +1968,9 @@ describe(`onPostCommit`, () => {
1968
1969
Scheduler.unstable_advanceTime(1);
1970
1971
+ const root = ReactNoop.createRoot();
1972
await act(() => {
1995
- ReactTestRenderer.create(
1973
+ root.render(
1974
<React.Profiler id="mount-test" onPostCommit={callback}>
1975
<ComponentWithEffects />
1976
</React.Profiler>,
@@ -2038,9 +2016,9 @@ describe(`onPostCommit`, () => {
2016
2017
const setCountRef = React.createRef(null);
2018
2041
- let renderer = null;
2019
+ const root = ReactNoop.createRoot();
2020
await act(() => {
2043
- renderer = ReactTestRenderer.create(
2021
+ root.render(
2022
<React.Profiler id="root-mount" onPostCommit={callback}>
2023
<React.Profiler id="a">
2024
<ComponentWithEffects
@@ -2079,7 +2057,7 @@ describe(`onPostCommit`, () => {
2057
expect(call[3]).toBe(1013); // commit start time (before mutations or effects)
2058
2059
await act(() => {
2082
- renderer.update(
2060
+ root.render(
2061
<React.Profiler id="root-update" onPostCommit={callback}>
2062
<React.Profiler id="b">
2063
<ComponentWithEffects duration={1000} cleanupDuration={10000} />
@@ -2136,9 +2114,9 @@ describe(`onPostCommit`, () => {
2114
Scheduler.unstable_advanceTime(1);
2115
2116
// Test an error that happens during an effect
2139
-
2117
+ const root = ReactNoop.createRoot();
2118
await act(() => {
2141
- ReactTestRenderer.create(
2119
+ root.render(
2120
<React.Profiler id="root" onPostCommit={callback}>
2121
<ErrorBoundary
2122
fallback={
@@ -2222,10 +2200,9 @@ describe(`onPostCommit`, () => {
2200
2201
Scheduler.unstable_advanceTime(1);
2202
2225
- let renderer = null;
2226
-
2203
+ const root = ReactNoop.createRoot();
2204
await act(() => {
2228
- renderer = ReactTestRenderer.create(
2205
+ root.render(
2206
<React.Profiler id="root" onPostCommit={callback}>
2207
<ErrorBoundary
2208
fallback={
@@ -2267,7 +2244,7 @@ describe(`onPostCommit`, () => {
2244
// Test an error that happens during an cleanup function
2245
2246
await act(() => {
2270
- renderer.update(
2247
+ root.render(
2248
<React.Profiler id="root" onPostCommit={callback}>
2249
<ErrorBoundary
2250
fallback={
packages/react/src/__tests__/ReactProfilerComponent-test.internal.js
new
+137
@@ -0,0 +1,137 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+let React;
13
+let ReactDOMClient;
14
+let ReactFeatureFlags;
15
+let act;
16
+let container;
17
+
18
+function loadModules({
19
+ enableProfilerTimer = true,
20
+ enableProfilerCommitHooks = true,
21
+ enableProfilerNestedUpdatePhase = true,
22
+ enableProfilerNestedUpdateScheduledHook = false,
23
+ replayFailedUnitOfWorkWithInvokeGuardedCallback = false,
24
+} = {}) {
25
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
26
+
27
+ ReactFeatureFlags.enableProfilerTimer = enableProfilerTimer;
28
+ ReactFeatureFlags.enableProfilerCommitHooks = enableProfilerCommitHooks;
29
+ ReactFeatureFlags.enableProfilerNestedUpdatePhase =
30
+ enableProfilerNestedUpdatePhase;
31
+ ReactFeatureFlags.enableProfilerNestedUpdateScheduledHook =
32
+ enableProfilerNestedUpdateScheduledHook;
33
+ ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback =
34
+ replayFailedUnitOfWorkWithInvokeGuardedCallback;
35
+
36
+ React = require('react');
37
+ ReactDOMClient = require('react-dom/client');
38
+ const InternalTestUtils = require('internal-test-utils');
39
+ act = InternalTestUtils.act;
40
+}
41
+
42
+describe('Profiler', () => {
43
+ beforeEach(() => {
44
+ container = document.createElement('div');
45
+ });
46
+
47
+ describe('works in profiling and non-profiling bundles', () => {
48
+ [true, false].forEach(enableProfilerTimer => {
49
+ describe(`enableProfilerTimer:${
50
+ enableProfilerTimer ? 'enabled' : 'disabled'
51
+ }`, () => {
52
+ beforeEach(() => {
53
+ jest.resetModules();
54
+
55
+ loadModules({enableProfilerTimer});
56
+ });
57
+
58
+ // This will throw in production too,
59
+ // But the test is only interested in verifying the DEV error message.
60
+ if (__DEV__ && enableProfilerTimer) {
61
+ it('should warn if required params are missing', async () => {
62
+ const root = ReactDOMClient.createRoot(container);
63
+ await expect(async () => {
64
+ await act(() => {
65
+ root.render(<React.Profiler />);
66
+ });
67
+ }).toErrorDev(
68
+ 'Profiler must specify an "id" of type `string` as a prop. Received the type `undefined` instead.',
69
+ {
70
+ withoutStack: true,
71
+ },
72
+ );
73
+ });
74
+ }
75
+
76
+ it('should support an empty Profiler (with no children)', async () => {
77
+ const root = ReactDOMClient.createRoot(container);
78
+ // As root
79
+ await act(() => {
80
+ root.render(<React.Profiler id="label" onRender={jest.fn()} />);
81
+ });
82
+ expect(container.innerHTML).toMatchSnapshot();
83
+
84
+ // As non-root
85
+ await act(() => {
86
+ root.render(
87
+ <div>
88
+ <React.Profiler id="label" onRender={jest.fn()} />
89
+ </div>,
90
+ );
91
+ });
92
+ expect(container.innerHTML).toMatchSnapshot();
93
+ });
94
+
95
+ it('should render children', async () => {
96
+ const FunctionComponent = ({label}) => <span>{label}</span>;
97
+ const root = ReactDOMClient.createRoot(container);
98
+ await act(() => {
99
+ root.render(
100
+ <div>
101
+ <span>outside span</span>
102
+ <React.Profiler id="label" onRender={jest.fn()}>
103
+ <span>inside span</span>
104
+ <FunctionComponent label="function component" />
105
+ </React.Profiler>
106
+ </div>,
107
+ );
108
+ });
109
+ expect(container.innerHTML).toMatchSnapshot();
110
+ });
111
+
112
+ it('should support nested Profilers', async () => {
113
+ const FunctionComponent = ({label}) => <div>{label}</div>;
114
+ class ClassComponent extends React.Component {
115
+ render() {
116
+ return <span>{this.props.label}</span>;
117
+ }
118
+ }
119
+ const root = ReactDOMClient.createRoot(container);
120
+ await act(() => {
121
+ root.render(
122
+ <React.Profiler id="outer" onRender={jest.fn()}>
123
+ <FunctionComponent label="outer function component" />
124
+ <React.Profiler id="inner" onRender={jest.fn()}>
125
+ <ClassComponent label="inner class component" />
126
+ <span>inner span</span>
127
+ </React.Profiler>
128
+ </React.Profiler>,
129
+ );
130
+ });
131
+
132
+ expect(container.innerHTML).toMatchSnapshot();
133
+ });
134
+ });
135
+ });
136
+ });
137
+});
packages/react/src/__tests__/__snapshots__/ReactProfilerComponent-test.internal.js.snap
renamed
+8
-56
@@ -1,65 +1,17 @@
1
// Jest Snapshot v1, https://goo.gl/fbAQLP
2
3
-exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should render children 1`] = `
4
-<div>
5
- <span>
6
- outside span
7
- </span>
8
- <span>
9
- inside span
10
- </span>
11
- <span>
12
- function component
13
- </span>
14
-</div>
15
-`;
3
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should render children 1`] = `"<div><span>outside span</span><span>inside span</span><span>function component</span></div>"`;
4
17
-exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support an empty Profiler (with no children) 1`] = `null`;
5
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support an empty Profiler (with no children) 1`] = `""`;
6
19
-exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support an empty Profiler (with no children) 2`] = `<div />`;
7
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support an empty Profiler (with no children) 2`] = `"<div></div>"`;
8
21
-exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support nested Profilers 1`] = `
22
-[
23
- <div>
24
- outer function component
25
- </div>,
26
- <block>
27
- inner class component
28
- </block>,
29
- <span>
30
- inner span
31
- </span>,
32
-]
33
-`;
9
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support nested Profilers 1`] = `"<div>outer function component</div><span>inner class component</span><span>inner span</span>"`;
10
35
-exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should render children 1`] = `
36
-<div>
37
- <span>
38
- outside span
39
- </span>
40
- <span>
41
- inside span
42
- </span>
43
- <span>
44
- function component
45
- </span>
46
-</div>
47
-`;
11
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should render children 1`] = `"<div><span>outside span</span><span>inside span</span><span>function component</span></div>"`;
12
49
-exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support an empty Profiler (with no children) 1`] = `null`;
13
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support an empty Profiler (with no children) 1`] = `""`;
14
51
-exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support an empty Profiler (with no children) 2`] = `<div />`;
15
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support an empty Profiler (with no children) 2`] = `"<div></div>"`;
16
53
-exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support nested Profilers 1`] = `
54
-[
55
- <div>
56
- outer function component
57
- </div>,
58
- <block>
59
- inner class component
60
- </block>,
61
- <span>
62
- inner span
63
- </span>,
64
-]
65
-`;
17
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support nested Profilers 1`] = `"<div>outer function component</div><span>inner class component</span><span>inner span</span>"`;