1111
1212describe ( 'DebugTracing' , ( ) => {
1313 let React ;
14- let ReactTestRenderer ;
14+ let ReactNoop ;
1515 let waitForPaint ;
1616 let waitForAll ;
17+ let act ;
1718
1819 let logs ;
1920
@@ -27,10 +28,11 @@ describe('DebugTracing', () => {
2728 jest . resetModules ( ) ;
2829
2930 React = require ( 'react' ) ;
30- ReactTestRenderer = require ( 'react-test -renderer' ) ;
31+ ReactNoop = require ( 'react-noop -renderer' ) ;
3132 const InternalTestUtils = require ( 'internal-test-utils' ) ;
3233 waitForPaint = InternalTestUtils . waitForPaint ;
3334 waitForAll = InternalTestUtils . waitForAll ;
35+ act = InternalTestUtils . act ;
3436
3537 logs = [ ] ;
3638
@@ -50,31 +52,32 @@ describe('DebugTracing', () => {
5052 } ) ;
5153
5254 // @gate enableDebugTracing
53- it ( 'should not log anything for sync render without suspends or state updates' , ( ) => {
54- ReactTestRenderer . create (
55- < React . unstable_DebugTracingMode >
56- < div />
57- </ React . unstable_DebugTracingMode > ,
58- ) ;
55+ it ( 'should not log anything for sync render without suspends or state updates' , async ( ) => {
56+ await act ( ( ) => {
57+ ReactNoop . render (
58+ < React . unstable_DebugTracingMode >
59+ < div />
60+ </ React . unstable_DebugTracingMode > ,
61+ ) ;
62+ } ) ;
5963
6064 expect ( logs ) . toEqual ( [ ] ) ;
6165 } ) ;
6266
63- // @gate experimental && build === 'development' && enableDebugTracing
64- it ( 'should not log anything for concurrent render without suspends or state updates' , ( ) => {
65- ReactTestRenderer . act ( ( ) =>
66- ReactTestRenderer . create (
67+ // @gate experimental && enableDebugTracing
68+ it ( 'should not log anything for concurrent render without suspends or state updates' , async ( ) => {
69+ await act ( ( ) =>
70+ ReactNoop . render (
6771 < React . unstable_DebugTracingMode >
6872 < div />
6973 </ React . unstable_DebugTracingMode > ,
70- { isConcurrent : true } ,
7174 ) ,
7275 ) ;
7376 expect ( logs ) . toEqual ( [ ] ) ;
7477 } ) ;
7578
7679 // @gate experimental && build === 'development' && enableDebugTracing
77- it ( 'should log sync render with suspense' , async ( ) => {
80+ it ( 'should log sync render with suspense, legacy ' , async ( ) => {
7881 let resolveFakeSuspensePromise ;
7982 let didResolve = false ;
8083 const fakeSuspensePromise = new Promise ( resolve => {
@@ -91,14 +94,12 @@ describe('DebugTracing', () => {
9194 return null ;
9295 }
9396
94- ReactTestRenderer . act ( ( ) =>
95- ReactTestRenderer . create (
96- < React . unstable_DebugTracingMode >
97- < React . Suspense fallback = { null } >
98- < Example />
99- </ React . Suspense >
100- </ React . unstable_DebugTracingMode > ,
101- ) ,
97+ ReactNoop . renderLegacySyncRoot (
98+ < React . unstable_DebugTracingMode >
99+ < React . Suspense fallback = { null } >
100+ < Example />
101+ </ React . Suspense >
102+ </ React . unstable_DebugTracingMode > ,
102103 ) ;
103104
104105 expect ( logs ) . toEqual ( [
@@ -116,7 +117,7 @@ describe('DebugTracing', () => {
116117 } ) ;
117118
118119 // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
119- it ( 'should log sync render with CPU suspense' , async ( ) => {
120+ it ( 'should log sync render with CPU suspense, legacy ' , async ( ) => {
120121 function Example ( ) {
121122 console . log ( '<Example/>' ) ;
122123 return null ;
@@ -127,7 +128,7 @@ describe('DebugTracing', () => {
127128 return children ;
128129 }
129130
130- ReactTestRenderer . create (
131+ ReactNoop . renderLegacySyncRoot (
131132 < React . unstable_DebugTracingMode >
132133 < Wrapper >
133134 < React . Suspense fallback = { null } unstable_expectedLoadTime = { 1 } >
@@ -172,14 +173,13 @@ describe('DebugTracing', () => {
172173 return null ;
173174 }
174175
175- ReactTestRenderer . act ( ( ) =>
176- ReactTestRenderer . create (
176+ await act ( ( ) =>
177+ ReactNoop . render (
177178 < React . unstable_DebugTracingMode >
178179 < React . Suspense fallback = { null } >
179180 < Example />
180181 </ React . Suspense >
181182 </ React . unstable_DebugTracingMode > ,
182- { isConcurrent : true } ,
183183 ) ,
184184 ) ;
185185
@@ -191,12 +191,12 @@ describe('DebugTracing', () => {
191191
192192 logs . splice ( 0 ) ;
193193
194- await ReactTestRenderer . act ( async ( ) => await resolveFakeSuspensePromise ( ) ) ;
194+ await act ( async ( ) => await resolveFakeSuspensePromise ( ) ) ;
195195 expect ( logs ) . toEqual ( [ 'log: ⚛️ Example resolved' ] ) ;
196196 } ) ;
197197
198198 // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
199- it ( 'should log concurrent render with CPU suspense' , ( ) => {
199+ it ( 'should log concurrent render with CPU suspense' , async ( ) => {
200200 function Example ( ) {
201201 console . log ( '<Example/>' ) ;
202202 return null ;
@@ -207,16 +207,15 @@ describe('DebugTracing', () => {
207207 return children ;
208208 }
209209
210- ReactTestRenderer . act ( ( ) =>
211- ReactTestRenderer . create (
210+ await act ( ( ) =>
211+ ReactNoop . render (
212212 < React . unstable_DebugTracingMode >
213213 < Wrapper >
214214 < React . Suspense fallback = { null } unstable_expectedLoadTime = { 1 } >
215215 < Example />
216216 </ React . Suspense >
217217 </ Wrapper >
218218 </ React . unstable_DebugTracingMode > ,
219- { isConcurrent : true } ,
220219 ) ,
221220 ) ;
222221
@@ -231,7 +230,7 @@ describe('DebugTracing', () => {
231230 } ) ;
232231
233232 // @gate experimental && build === 'development' && enableDebugTracing
234- it ( 'should log cascading class component updates' , ( ) => {
233+ it ( 'should log cascading class component updates' , async ( ) => {
235234 class Example extends React . Component {
236235 state = { didMount : false } ;
237236 componentDidMount ( ) {
@@ -242,12 +241,11 @@ describe('DebugTracing', () => {
242241 }
243242 }
244243
245- ReactTestRenderer . act ( ( ) =>
246- ReactTestRenderer . create (
244+ await act ( ( ) =>
245+ ReactNoop . render (
247246 < React . unstable_DebugTracingMode >
248247 < Example />
249248 </ React . unstable_DebugTracingMode > ,
250- { isConcurrent : true } ,
251249 ) ,
252250 ) ;
253251
@@ -261,7 +259,7 @@ describe('DebugTracing', () => {
261259 } ) ;
262260
263261 // @gate experimental && build === 'development' && enableDebugTracing
264- it ( 'should log render phase state updates for class component' , ( ) => {
262+ it ( 'should log render phase state updates for class component' , async ( ) => {
265263 class Example extends React . Component {
266264 state = { didRender : false } ;
267265 render ( ) {
@@ -272,16 +270,17 @@ describe('DebugTracing', () => {
272270 }
273271 }
274272
275- expect ( ( ) => {
276- ReactTestRenderer . act ( ( ) =>
277- ReactTestRenderer . create (
273+ await expect ( async ( ) => {
274+ await act ( ( ) => {
275+ ReactNoop . render (
278276 < React . unstable_DebugTracingMode >
279277 < Example />
280278 </ React . unstable_DebugTracingMode > ,
281- { isConcurrent : true } ,
282- ) ,
283- ) ;
284- } ) . toErrorDev ( 'Cannot update during an existing state transition' ) ;
279+ ) ;
280+ } ) ;
281+ } ) . toErrorDev (
282+ 'Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.' ,
283+ ) ;
285284
286285 expect ( logs ) . toEqual ( [
287286 `group: ⚛️ render (${ DEFAULT_LANE_STRING } )` ,
@@ -291,7 +290,7 @@ describe('DebugTracing', () => {
291290 } ) ;
292291
293292 // @gate experimental && build === 'development' && enableDebugTracing
294- it ( 'should log cascading layout updates' , ( ) => {
293+ it ( 'should log cascading layout updates' , async ( ) => {
295294 function Example ( ) {
296295 const [ didMount , setDidMount ] = React . useState ( false ) ;
297296 React . useLayoutEffect ( ( ) => {
@@ -300,12 +299,11 @@ describe('DebugTracing', () => {
300299 return didMount ;
301300 }
302301
303- ReactTestRenderer . act ( ( ) =>
304- ReactTestRenderer . create (
302+ await act ( ( ) =>
303+ ReactNoop . render (
305304 < React . unstable_DebugTracingMode >
306305 < Example />
307306 </ React . unstable_DebugTracingMode > ,
308- { isConcurrent : true } ,
309307 ) ,
310308 ) ;
311309
@@ -319,7 +317,7 @@ describe('DebugTracing', () => {
319317 } ) ;
320318
321319 // @gate experimental && build === 'development' && enableDebugTracing
322- it ( 'should log cascading passive updates' , ( ) => {
320+ it ( 'should log cascading passive updates' , async ( ) => {
323321 function Example ( ) {
324322 const [ didMount , setDidMount ] = React . useState ( false ) ;
325323 React . useEffect ( ( ) => {
@@ -328,12 +326,11 @@ describe('DebugTracing', () => {
328326 return didMount ;
329327 }
330328
331- ReactTestRenderer . act ( ( ) => {
332- ReactTestRenderer . create (
329+ await act ( ( ) => {
330+ ReactNoop . render (
333331 < React . unstable_DebugTracingMode >
334332 < Example />
335333 </ React . unstable_DebugTracingMode > ,
336- { isConcurrent : true } ,
337334 ) ;
338335 } ) ;
339336 expect ( logs ) . toEqual ( [
@@ -344,7 +341,7 @@ describe('DebugTracing', () => {
344341 } ) ;
345342
346343 // @gate experimental && build === 'development' && enableDebugTracing
347- it ( 'should log render phase updates' , ( ) => {
344+ it ( 'should log render phase updates' , async ( ) => {
348345 function Example ( ) {
349346 const [ didRender , setDidRender ] = React . useState ( false ) ;
350347 if ( ! didRender ) {
@@ -353,12 +350,11 @@ describe('DebugTracing', () => {
353350 return didRender ;
354351 }
355352
356- ReactTestRenderer . act ( ( ) => {
357- ReactTestRenderer . create (
353+ await act ( ( ) => {
354+ ReactNoop . render (
358355 < React . unstable_DebugTracingMode >
359356 < Example />
360357 </ React . unstable_DebugTracingMode > ,
361- { isConcurrent : true } ,
362358 ) ;
363359 } ) ;
364360
@@ -370,18 +366,17 @@ describe('DebugTracing', () => {
370366 } ) ;
371367
372368 // @gate experimental && build === 'development' && enableDebugTracing
373- it ( 'should log when user code logs' , ( ) => {
369+ it ( 'should log when user code logs' , async ( ) => {
374370 function Example ( ) {
375371 console . log ( 'Hello from user code' ) ;
376372 return null ;
377373 }
378374
379- ReactTestRenderer . act ( ( ) =>
380- ReactTestRenderer . create (
375+ await act ( ( ) =>
376+ ReactNoop . render (
381377 < React . unstable_DebugTracingMode >
382378 < Example />
383379 </ React . unstable_DebugTracingMode > ,
384- { isConcurrent : true } ,
385380 ) ,
386381 ) ;
387382
@@ -392,8 +387,8 @@ describe('DebugTracing', () => {
392387 ] ) ;
393388 } ) ;
394389
395- // @gate experimental && build === 'development' && enableDebugTracing
396- it ( 'should not log anything outside of a unstable_DebugTracingMode subtree' , ( ) => {
390+ // @gate experimental && enableDebugTracing
391+ it ( 'should not log anything outside of a unstable_DebugTracingMode subtree' , async ( ) => {
397392 function ExampleThatCascades ( ) {
398393 const [ didMount , setDidMount ] = React . useState ( false ) ;
399394 React . useLayoutEffect ( ( ) => {
@@ -412,8 +407,8 @@ describe('DebugTracing', () => {
412407 return null ;
413408 }
414409
415- ReactTestRenderer . act ( ( ) =>
416- ReactTestRenderer . create (
410+ await act ( ( ) =>
411+ ReactNoop . render (
417412 < React . Fragment >
418413 < ExampleThatCascades />
419414 < React . Suspense fallback = { null } >
0 commit comments