@@ -19,7 +19,6 @@ let Suspense;
19
19
let SuspenseList ;
20
20
let useSyncExternalStore ;
21
21
let useSyncExternalStoreWithSelector ;
22
- let use ;
23
22
let PropTypes ;
24
23
let textCache ;
25
24
let window ;
@@ -43,7 +42,6 @@ describe('ReactDOMFizzServer', () => {
43
42
Suspense = React . Suspense ;
44
43
if ( gate ( flags => flags . enableSuspenseList ) ) {
45
44
SuspenseList = React . SuspenseList ;
46
- use = React . experimental_use ;
47
45
}
48
46
49
47
PropTypes = require ( 'prop-types' ) ;
@@ -5286,264 +5284,6 @@ describe('ReactDOMFizzServer', () => {
5286
5284
console . error = originalConsoleError ;
5287
5285
}
5288
5286
} ) ;
5289
-
5290
- // @gate enableUseHook
5291
- it ( 'basic use(promise)' , async ( ) => {
5292
- const promiseA = Promise . resolve ( 'A' ) ;
5293
- const promiseB = Promise . resolve ( 'B' ) ;
5294
- const promiseC = Promise . resolve ( 'C' ) ;
5295
-
5296
- function Async ( ) {
5297
- return use ( promiseA ) + use ( promiseB ) + use ( promiseC ) ;
5298
- }
5299
-
5300
- function App ( ) {
5301
- return (
5302
- < Suspense fallback = "Loading..." >
5303
- < Async />
5304
- </ Suspense >
5305
- ) ;
5306
- }
5307
-
5308
- await act ( async ( ) => {
5309
- const { pipe} = ReactDOMFizzServer . renderToPipeableStream ( < App /> ) ;
5310
- pipe ( writable ) ;
5311
- } ) ;
5312
-
5313
- // TODO: The `act` implementation in this file doesn't unwrap microtasks
5314
- // automatically. We can't use the same `act` we use for Fiber tests
5315
- // because that relies on the mock Scheduler. Doesn't affect any public
5316
- // API but we might want to fix this for our own internal tests.
5317
- //
5318
- // For now, wait for each promise in sequence.
5319
- await act ( async ( ) => {
5320
- await promiseA ;
5321
- } ) ;
5322
- await act ( async ( ) => {
5323
- await promiseB ;
5324
- } ) ;
5325
- await act ( async ( ) => {
5326
- await promiseC ;
5327
- } ) ;
5328
-
5329
- expect ( getVisibleChildren ( container ) ) . toEqual ( 'ABC' ) ;
5330
-
5331
- ReactDOMClient . hydrateRoot ( container , < App /> ) ;
5332
- expect ( Scheduler ) . toFlushAndYield ( [ ] ) ;
5333
- expect ( getVisibleChildren ( container ) ) . toEqual ( 'ABC' ) ;
5334
- } ) ;
5335
-
5336
- // @gate enableUseHook
5337
- it ( 'basic use(context)' , async ( ) => {
5338
- const ContextA = React . createContext ( 'default' ) ;
5339
- const ContextB = React . createContext ( 'B' ) ;
5340
- const ServerContext = React . createServerContext (
5341
- 'ServerContext' ,
5342
- 'default' ,
5343
- ) ;
5344
- function Client ( ) {
5345
- return use ( ContextA ) + use ( ContextB ) ;
5346
- }
5347
- function ServerComponent ( ) {
5348
- return use ( ServerContext ) ;
5349
- }
5350
- function Server ( ) {
5351
- return (
5352
- < ServerContext . Provider value = "C" >
5353
- < ServerComponent />
5354
- </ ServerContext . Provider >
5355
- ) ;
5356
- }
5357
- function App ( ) {
5358
- return (
5359
- < >
5360
- < ContextA . Provider value = "A" >
5361
- < Client />
5362
- </ ContextA . Provider >
5363
- < Server />
5364
- </ >
5365
- ) ;
5366
- }
5367
-
5368
- await act ( async ( ) => {
5369
- const { pipe} = ReactDOMFizzServer . renderToPipeableStream ( < App /> ) ;
5370
- pipe ( writable ) ;
5371
- } ) ;
5372
- expect ( getVisibleChildren ( container ) ) . toEqual ( [ 'AB' , 'C' ] ) ;
5373
-
5374
- // Hydration uses a different renderer runtime (Fiber instead of Fizz).
5375
- // We reset _currentRenderer here to not trigger a warning about multiple
5376
- // renderers concurrently using these contexts
5377
- ContextA . _currentRenderer = null ;
5378
- ServerContext . _currentRenderer = null ;
5379
- ReactDOMClient . hydrateRoot ( container , < App /> ) ;
5380
- expect ( Scheduler ) . toFlushAndYield ( [ ] ) ;
5381
- expect ( getVisibleChildren ( container ) ) . toEqual ( [ 'AB' , 'C' ] ) ;
5382
- } ) ;
5383
-
5384
- // @gate enableUseHook
5385
- it ( 'use(promise) in multiple components' , async ( ) => {
5386
- const promiseA = Promise . resolve ( 'A' ) ;
5387
- const promiseB = Promise . resolve ( 'B' ) ;
5388
- const promiseC = Promise . resolve ( 'C' ) ;
5389
- const promiseD = Promise . resolve ( 'D' ) ;
5390
-
5391
- function Child ( { prefix} ) {
5392
- return prefix + use ( promiseC ) + use ( promiseD ) ;
5393
- }
5394
-
5395
- function Parent ( ) {
5396
- return < Child prefix = { use ( promiseA ) + use ( promiseB ) } /> ;
5397
- }
5398
-
5399
- function App ( ) {
5400
- return (
5401
- < Suspense fallback = "Loading..." >
5402
- < Parent />
5403
- </ Suspense >
5404
- ) ;
5405
- }
5406
-
5407
- await act ( async ( ) => {
5408
- const { pipe} = ReactDOMFizzServer . renderToPipeableStream ( < App /> ) ;
5409
- pipe ( writable ) ;
5410
- } ) ;
5411
-
5412
- // TODO: The `act` implementation in this file doesn't unwrap microtasks
5413
- // automatically. We can't use the same `act` we use for Fiber tests
5414
- // because that relies on the mock Scheduler. Doesn't affect any public
5415
- // API but we might want to fix this for our own internal tests.
5416
- //
5417
- // For now, wait for each promise in sequence.
5418
- await act ( async ( ) => {
5419
- await promiseA ;
5420
- } ) ;
5421
- await act ( async ( ) => {
5422
- await promiseB ;
5423
- } ) ;
5424
- await act ( async ( ) => {
5425
- await promiseC ;
5426
- } ) ;
5427
- await act ( async ( ) => {
5428
- await promiseD ;
5429
- } ) ;
5430
-
5431
- expect ( getVisibleChildren ( container ) ) . toEqual ( 'ABCD' ) ;
5432
-
5433
- ReactDOMClient . hydrateRoot ( container , < App /> ) ;
5434
- expect ( Scheduler ) . toFlushAndYield ( [ ] ) ;
5435
- expect ( getVisibleChildren ( container ) ) . toEqual ( 'ABCD' ) ;
5436
- } ) ;
5437
-
5438
- // @gate enableUseHook
5439
- it ( 'using a rejected promise will throw' , async ( ) => {
5440
- const promiseA = Promise . resolve ( 'A' ) ;
5441
- const promiseB = Promise . reject ( new Error ( 'Oops!' ) ) ;
5442
- const promiseC = Promise . resolve ( 'C' ) ;
5443
-
5444
- // Jest/Node will raise an unhandled rejected error unless we await this. It
5445
- // works fine in the browser, though.
5446
- await expect ( promiseB ) . rejects . toThrow ( 'Oops!' ) ;
5447
-
5448
- function Async ( ) {
5449
- return use ( promiseA ) + use ( promiseB ) + use ( promiseC ) ;
5450
- }
5451
-
5452
- class ErrorBoundary extends React . Component {
5453
- state = { error : null } ;
5454
- static getDerivedStateFromError ( error ) {
5455
- return { error} ;
5456
- }
5457
- render ( ) {
5458
- if ( this . state . error ) {
5459
- return this . state . error . message ;
5460
- }
5461
- return this . props . children ;
5462
- }
5463
- }
5464
-
5465
- function App ( ) {
5466
- return (
5467
- < Suspense fallback = "Loading..." >
5468
- < ErrorBoundary >
5469
- < Async />
5470
- </ ErrorBoundary >
5471
- </ Suspense >
5472
- ) ;
5473
- }
5474
-
5475
- const reportedServerErrors = [ ] ;
5476
- await act ( async ( ) => {
5477
- const { pipe} = ReactDOMFizzServer . renderToPipeableStream ( < App /> , {
5478
- onError ( error ) {
5479
- reportedServerErrors . push ( error ) ;
5480
- } ,
5481
- } ) ;
5482
- pipe ( writable ) ;
5483
- } ) ;
5484
-
5485
- // TODO: The `act` implementation in this file doesn't unwrap microtasks
5486
- // automatically. We can't use the same `act` we use for Fiber tests
5487
- // because that relies on the mock Scheduler. Doesn't affect any public
5488
- // API but we might want to fix this for our own internal tests.
5489
- //
5490
- // For now, wait for each promise in sequence.
5491
- await act ( async ( ) => {
5492
- await promiseA ;
5493
- } ) ;
5494
- await act ( async ( ) => {
5495
- await expect ( promiseB ) . rejects . toThrow ( 'Oops!' ) ;
5496
- } ) ;
5497
- await act ( async ( ) => {
5498
- await promiseC ;
5499
- } ) ;
5500
-
5501
- expect ( getVisibleChildren ( container ) ) . toEqual ( 'Loading...' ) ;
5502
- expect ( reportedServerErrors . length ) . toBe ( 1 ) ;
5503
- expect ( reportedServerErrors [ 0 ] . message ) . toBe ( 'Oops!' ) ;
5504
-
5505
- const reportedClientErrors = [ ] ;
5506
- ReactDOMClient . hydrateRoot ( container , < App /> , {
5507
- onRecoverableError ( error ) {
5508
- reportedClientErrors . push ( error ) ;
5509
- } ,
5510
- } ) ;
5511
- expect ( Scheduler ) . toFlushAndYield ( [ ] ) ;
5512
- expect ( getVisibleChildren ( container ) ) . toEqual ( 'Oops!' ) ;
5513
- expect ( reportedClientErrors . length ) . toBe ( 1 ) ;
5514
- if ( __DEV__ ) {
5515
- expect ( reportedClientErrors [ 0 ] . message ) . toBe ( 'Oops!' ) ;
5516
- } else {
5517
- expect ( reportedClientErrors [ 0 ] . message ) . toBe (
5518
- 'The server could not finish this Suspense boundary, likely due to ' +
5519
- 'an error during server rendering. Switched to client rendering.' ,
5520
- ) ;
5521
- }
5522
- } ) ;
5523
-
5524
- // @gate enableUseHook
5525
- it ( "use a promise that's already been instrumented and resolved" , async ( ) => {
5526
- const thenable = {
5527
- status : 'fulfilled' ,
5528
- value : 'Hi' ,
5529
- then ( ) { } ,
5530
- } ;
5531
-
5532
- // This will never suspend because the thenable already resolved
5533
- function App ( ) {
5534
- return use ( thenable ) ;
5535
- }
5536
-
5537
- await act ( async ( ) => {
5538
- const { pipe} = ReactDOMFizzServer . renderToPipeableStream ( < App /> ) ;
5539
- pipe ( writable ) ;
5540
- } ) ;
5541
- expect ( getVisibleChildren ( container ) ) . toEqual ( 'Hi' ) ;
5542
-
5543
- ReactDOMClient . hydrateRoot ( container , < App /> ) ;
5544
- expect ( Scheduler ) . toFlushAndYield ( [ ] ) ;
5545
- expect ( getVisibleChildren ( container ) ) . toEqual ( 'Hi' ) ;
5546
- } ) ;
5547
5287
} ) ;
5548
5288
5549
5289
describe ( 'useEvent' , ( ) => {
0 commit comments