@@ -18,6 +18,8 @@ let ReactNoop;
18
18
let Suspense ;
19
19
let Scheduler ;
20
20
let act ;
21
+ let waitForAll ;
22
+ let assertLog ;
21
23
22
24
describe ( 'memo' , ( ) => {
23
25
beforeEach ( ( ) => {
@@ -29,6 +31,10 @@ describe('memo', () => {
29
31
Scheduler = require ( 'scheduler' ) ;
30
32
act = require ( 'jest-react' ) . act ;
31
33
( { Suspense} = React ) ;
34
+
35
+ const InternalTestUtils = require ( 'internal-test-utils' ) ;
36
+ waitForAll = InternalTestUtils . waitForAll ;
37
+ assertLog = InternalTestUtils . assertLog ;
32
38
} ) ;
33
39
34
40
function Text ( props ) {
@@ -105,9 +111,7 @@ describe('memo', () => {
105
111
< Counter count = { 0 } />
106
112
</ Suspense > ,
107
113
) ;
108
- expect ( Scheduler ) . toFlushAndYield ( [ 'Loading...' ] ) ;
109
- await Promise . resolve ( ) ;
110
- expect ( Scheduler ) . toFlushAndYield ( [ 0 ] ) ;
114
+ await waitForAll ( [ 'Loading...' , 0 ] ) ;
111
115
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = { 0 } /> ) ;
112
116
113
117
// Should bail out because props have not changed
@@ -116,7 +120,7 @@ describe('memo', () => {
116
120
< Counter count = { 0 } />
117
121
</ Suspense > ,
118
122
) ;
119
- expect ( Scheduler ) . toFlushAndYield ( [ ] ) ;
123
+ await waitForAll ( [ ] ) ;
120
124
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = { 0 } /> ) ;
121
125
122
126
// Should update because count prop changed
@@ -125,7 +129,7 @@ describe('memo', () => {
125
129
< Counter count = { 1 } />
126
130
</ Suspense > ,
127
131
) ;
128
- expect ( Scheduler ) . toFlushAndYield ( [ 1 ] ) ;
132
+ await waitForAll ( [ 1 ] ) ;
129
133
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = { 1 } /> ) ;
130
134
} ) ;
131
135
@@ -160,19 +164,17 @@ describe('memo', () => {
160
164
161
165
const parent = React . createRef ( null ) ;
162
166
ReactNoop . render ( < Parent ref = { parent } /> ) ;
163
- expect ( Scheduler ) . toFlushAndYield ( [ 'Loading...' ] ) ;
164
- await Promise . resolve ( ) ;
165
- expect ( Scheduler ) . toFlushAndYield ( [ 'Count: 0' ] ) ;
167
+ await waitForAll ( [ 'Loading...' , 'Count: 0' ] ) ;
166
168
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = "Count: 0" /> ) ;
167
169
168
170
// Should bail out because props have not changed
169
171
ReactNoop . render ( < Parent ref = { parent } /> ) ;
170
- expect ( Scheduler ) . toFlushAndYield ( [ ] ) ;
172
+ await waitForAll ( [ ] ) ;
171
173
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = "Count: 0" /> ) ;
172
174
173
175
// Should update because there was a context change
174
176
parent . current . setState ( { count : 1 } ) ;
175
- expect ( Scheduler ) . toFlushAndYield ( [ 'Count: 1' ] ) ;
177
+ await waitForAll ( [ 'Count: 1' ] ) ;
176
178
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = "Count: 1" /> ) ;
177
179
} ) ;
178
180
@@ -273,7 +275,7 @@ describe('memo', () => {
273
275
await act ( async ( ) => {
274
276
root . render ( < App prop = "A" /> ) ;
275
277
} ) ;
276
- expect ( Scheduler ) . toHaveYielded ( [
278
+ assertLog ( [
277
279
'SimpleMemo [A0]' ,
278
280
'ComplexMemo [A0]' ,
279
281
'MemoWithIndirection [A0]' ,
@@ -283,7 +285,7 @@ describe('memo', () => {
283
285
await act ( async ( ) => {
284
286
root . render ( < App prop = "B" /> ) ;
285
287
} ) ;
286
- expect ( Scheduler ) . toHaveYielded ( [
288
+ assertLog ( [
287
289
'SimpleMemo [B0]' ,
288
290
'ComplexMemo [B0]' ,
289
291
'MemoWithIndirection [B0]' ,
@@ -298,7 +300,7 @@ describe('memo', () => {
298
300
root . render ( < App prop = "B" /> ) ;
299
301
} ) ;
300
302
// Nothing re-renders
301
- expect ( Scheduler ) . toHaveYielded ( [ ] ) ;
303
+ assertLog ( [ ] ) ;
302
304
303
305
// Demonstrate what happens when the prop object changes, it bails out
304
306
// because all the props are the same, but we still render the
@@ -309,7 +311,7 @@ describe('memo', () => {
309
311
} ) ;
310
312
// The components should re-render with the new local state, but none
311
313
// of the props objects should have changed
312
- expect ( Scheduler ) . toHaveYielded ( [
314
+ assertLog ( [
313
315
'SimpleMemo [B1]' ,
314
316
'ComplexMemo [B1]' ,
315
317
'MemoWithIndirection [B1]' ,
@@ -322,7 +324,7 @@ describe('memo', () => {
322
324
} ) ;
323
325
// The components should re-render with the new local state, but none
324
326
// of the props objects should have changed
325
- expect ( Scheduler ) . toHaveYielded ( [
327
+ assertLog ( [
326
328
'SimpleMemo [B2]' ,
327
329
'ComplexMemo [B2]' ,
328
330
'MemoWithIndirection [B2]' ,
@@ -345,9 +347,7 @@ describe('memo', () => {
345
347
< Counter count = { 0 } />
346
348
</ Suspense > ,
347
349
) ;
348
- expect ( Scheduler ) . toFlushAndYield ( [ 'Loading...' ] ) ;
349
- await Promise . resolve ( ) ;
350
- expect ( Scheduler ) . toFlushAndYield ( [ 0 ] ) ;
350
+ await waitForAll ( [ 'Loading...' , 0 ] ) ;
351
351
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = { 0 } /> ) ;
352
352
353
353
// Should bail out because props have not changed
@@ -356,7 +356,7 @@ describe('memo', () => {
356
356
< Counter count = { 0 } />
357
357
</ Suspense > ,
358
358
) ;
359
- expect ( Scheduler ) . toFlushAndYield ( [ 'Old count: 0, New count: 0' ] ) ;
359
+ await waitForAll ( [ 'Old count: 0, New count: 0' ] ) ;
360
360
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = { 0 } /> ) ;
361
361
362
362
// Should update because count prop changed
@@ -365,7 +365,7 @@ describe('memo', () => {
365
365
< Counter count = { 1 } />
366
366
</ Suspense > ,
367
367
) ;
368
- expect ( Scheduler ) . toFlushAndYield ( [ 'Old count: 0, New count: 1' , 1 ] ) ;
368
+ await waitForAll ( [ 'Old count: 0, New count: 1' , 1 ] ) ;
369
369
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = { 1 } /> ) ;
370
370
} ) ;
371
371
@@ -383,9 +383,7 @@ describe('memo', () => {
383
383
< Counter count = { 0 } />
384
384
</ Suspense > ,
385
385
) ;
386
- expect ( Scheduler ) . toFlushAndYield ( [ 'Loading...' ] ) ;
387
- await Promise . resolve ( ) ;
388
- expect ( Scheduler ) . toFlushAndYield ( [ '0!' ] ) ;
386
+ await waitForAll ( [ 'Loading...' , '0!' ] ) ;
389
387
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = "0!" /> ) ;
390
388
391
389
// Should bail out because props have not changed
@@ -394,7 +392,7 @@ describe('memo', () => {
394
392
< Counter count = { 0 } />
395
393
</ Suspense > ,
396
394
) ;
397
- expect ( Scheduler ) . toFlushAndYield ( [ ] ) ;
395
+ await waitForAll ( [ ] ) ;
398
396
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = "0!" /> ) ;
399
397
400
398
// Should update because count prop changed
@@ -403,7 +401,7 @@ describe('memo', () => {
403
401
< Counter count = { 1 } />
404
402
</ Suspense > ,
405
403
) ;
406
- expect ( Scheduler ) . toFlushAndYield ( [ '1!' ] ) ;
404
+ await waitForAll ( [ '1!' ] ) ;
407
405
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = "1!" /> ) ;
408
406
} ) ;
409
407
@@ -436,10 +434,8 @@ describe('memo', () => {
436
434
< Counter e = { 5 } />
437
435
</ Suspense > ,
438
436
) ;
439
- expect ( Scheduler ) . toFlushAndYield ( [ 'Loading...' ] ) ;
440
- await Promise . resolve ( ) ;
441
- expect ( ( ) => {
442
- expect ( Scheduler ) . toFlushAndYield ( [ 15 ] ) ;
437
+ await expect ( async ( ) => {
438
+ await waitForAll ( [ 'Loading...' , 15 ] ) ;
443
439
} ) . toErrorDev ( [
444
440
'Counter: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.' ,
445
441
] ) ;
@@ -451,7 +447,7 @@ describe('memo', () => {
451
447
< Counter e = { 5 } />
452
448
</ Suspense > ,
453
449
) ;
454
- expect ( Scheduler ) . toFlushAndYield ( [ ] ) ;
450
+ await waitForAll ( [ ] ) ;
455
451
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = { 15 } /> ) ;
456
452
457
453
// Should update because count prop changed
@@ -460,7 +456,7 @@ describe('memo', () => {
460
456
< Counter e = { 10 } />
461
457
</ Suspense > ,
462
458
) ;
463
- expect ( Scheduler ) . toFlushAndYield ( [ 20 ] ) ;
459
+ await waitForAll ( [ 20 ] ) ;
464
460
expect ( ReactNoop ) . toMatchRenderedOutput ( < span prop = { 20 } /> ) ;
465
461
} ) ;
466
462
@@ -480,57 +476,57 @@ describe('memo', () => {
480
476
) ;
481
477
} ) ;
482
478
483
- it ( 'validates propTypes declared on the inner component' , ( ) => {
479
+ it ( 'validates propTypes declared on the inner component' , async ( ) => {
484
480
function FnInner ( props ) {
485
481
return props . inner ;
486
482
}
487
483
FnInner . propTypes = { inner : PropTypes . number . isRequired } ;
488
484
const Fn = React . memo ( FnInner ) ;
489
485
490
486
// Mount
491
- expect ( ( ) => {
487
+ await expect ( async ( ) => {
492
488
ReactNoop . render ( < Fn inner = "2" /> ) ;
493
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
489
+ await waitForAll ( [ ] ) ;
494
490
} ) . toErrorDev (
495
491
'Invalid prop `inner` of type `string` supplied to `FnInner`, expected `number`.' ,
496
492
) ;
497
493
498
494
// Update
499
- expect ( ( ) => {
495
+ await expect ( async ( ) => {
500
496
ReactNoop . render ( < Fn inner = { false } /> ) ;
501
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
497
+ await waitForAll ( [ ] ) ;
502
498
} ) . toErrorDev (
503
499
'Invalid prop `inner` of type `boolean` supplied to `FnInner`, expected `number`.' ,
504
500
) ;
505
501
} ) ;
506
502
507
- it ( 'validates propTypes declared on the outer component' , ( ) => {
503
+ it ( 'validates propTypes declared on the outer component' , async ( ) => {
508
504
function FnInner ( props ) {
509
505
return props . outer ;
510
506
}
511
507
const Fn = React . memo ( FnInner ) ;
512
508
Fn . propTypes = { outer : PropTypes . number . isRequired } ;
513
509
514
510
// Mount
515
- expect ( ( ) => {
511
+ await expect ( async ( ) => {
516
512
ReactNoop . render ( < Fn outer = "3" /> ) ;
517
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
513
+ await waitForAll ( [ ] ) ;
518
514
} ) . toErrorDev (
519
515
// Outer props are checked in createElement
520
516
'Invalid prop `outer` of type `string` supplied to `FnInner`, expected `number`.' ,
521
517
) ;
522
518
523
519
// Update
524
- expect ( ( ) => {
520
+ await expect ( async ( ) => {
525
521
ReactNoop . render ( < Fn outer = { false } /> ) ;
526
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
522
+ await waitForAll ( [ ] ) ;
527
523
} ) . toErrorDev (
528
524
// Outer props are checked in createElement
529
525
'Invalid prop `outer` of type `boolean` supplied to `FnInner`, expected `number`.' ,
530
526
) ;
531
527
} ) ;
532
528
533
- it ( 'validates nested propTypes declarations' , ( ) => {
529
+ it ( 'validates nested propTypes declarations' , async ( ) => {
534
530
function Inner ( props ) {
535
531
return props . inner + props . middle + props . outer ;
536
532
}
@@ -549,34 +545,34 @@ describe('memo', () => {
549
545
< Outer />
550
546
</ div > ,
551
547
) ;
552
- expect ( ( ) => {
553
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
548
+ await expect ( async ( ) => {
549
+ await waitForAll ( [ ] ) ;
554
550
} ) . toErrorDev ( [
555
551
'Inner: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.' ,
556
552
] ) ;
557
553
558
554
// Mount
559
- expect ( ( ) => {
555
+ await expect ( async ( ) => {
560
556
ReactNoop . render (
561
557
< div >
562
558
< Outer inner = "2" middle = "3" outer = "4" />
563
559
</ div > ,
564
560
) ;
565
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
561
+ await waitForAll ( [ ] ) ;
566
562
} ) . toErrorDev ( [
567
563
'Invalid prop `outer` of type `string` supplied to `Inner`, expected `number`.' ,
568
564
'Invalid prop `middle` of type `string` supplied to `Inner`, expected `number`.' ,
569
565
'Invalid prop `inner` of type `string` supplied to `Inner`, expected `number`.' ,
570
566
] ) ;
571
567
572
568
// Update
573
- expect ( ( ) => {
569
+ await expect ( async ( ) => {
574
570
ReactNoop . render (
575
571
< div >
576
572
< Outer inner = { false } middle = { false } outer = { false } />
577
573
</ div > ,
578
574
) ;
579
- expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
575
+ await waitForAll ( [ ] ) ;
580
576
} ) . toErrorDev ( [
581
577
'Invalid prop `outer` of type `boolean` supplied to `Inner`, expected `number`.' ,
582
578
'Invalid prop `middle` of type `boolean` supplied to `Inner`, expected `number`.' ,
0 commit comments