diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js index e834ca5eda8e1..21e7eef299619 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js @@ -139,6 +139,53 @@ describe('ReactSuspense', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]); }); + it('suspends siblings and later recovers each independently', async () => { + // Render two sibling Timeout components + ReactNoop.render( + + }> + + + }> + + + , + ); + expect(ReactNoop.flush()).toEqual(['Suspend! [A]', 'Suspend! [B]']); + expect(ReactNoop.getChildren()).toEqual([]); + + // Advance time by enough to timeout both components and commit their placeholders + ReactNoop.expire(4000); + await advanceTimers(4000); + + expect(ReactNoop.flush()).toEqual([ + 'Suspend! [A]', + 'Loading A...', + 'Suspend! [B]', + 'Loading B...', + ]); + expect(ReactNoop.getChildren()).toEqual([ + span('Loading A...'), + span('Loading B...'), + ]); + + // Advance time by enough that the first Timeout's promise resolves + // and switches back to the normal view. The second Timeout should still show the placeholder + ReactNoop.expire(1000); + await advanceTimers(1000); + + expect(ReactNoop.flush()).toEqual(['Promise resolved [A]', 'A']); + expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]); + + // Advance time by enough that the second Timeout's promise resolves + // and switches back to the normal view + ReactNoop.expire(1000); + await advanceTimers(1000); + + expect(ReactNoop.flush()).toEqual(['Promise resolved [B]', 'B']); + expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]); + }); + it('continues rendering siblings after suspending', async () => { ReactNoop.render(