diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js index 5039e8a820e8d..c45a10c99d6d8 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js @@ -2556,6 +2556,147 @@ describe('ReactSuspenseList', () => { ); }); + // @gate experimental + it('should be able to progressively show CPU expensive rows with two pass rendering', async () => { + function TwoPass({text}) { + const [pass, setPass] = React.useState(0); + React.useLayoutEffect(() => { + Scheduler.unstable_yieldValue('Mount ' + text); + setPass(1); + }, []); + return ; + } + + function Sleep({time, children}) { + Scheduler.unstable_advanceTime(time); + return children; + } + + function App() { + Scheduler.unstable_yieldValue('App'); + return ( + + }> + + + + + }> + + + + + + + + + ); + } + + ReactNoop.render(); + + expect(Scheduler).toFlushAndYieldThrough([ + 'App', + 'First Pass A', + 'Mount A', + 'A', + ]); + expect(ReactNoop).toMatchRenderedOutput(A); + + expect(Scheduler).toFlushAndYieldThrough(['First Pass B', 'Mount B', 'B']); + expect(ReactNoop).toMatchRenderedOutput( + <> + A + B + , + ); + + expect(Scheduler).toFlushAndYield(['C']); + expect(ReactNoop).toMatchRenderedOutput( + <> + A + B + C + , + ); + }); + + // @gate experimental + it('should be able to progressively show rows with two pass rendering and visible', async () => { + function TwoPass({text}) { + const [pass, setPass] = React.useState(0); + React.useLayoutEffect(() => { + Scheduler.unstable_yieldValue('Mount ' + text); + setPass(1); + }, []); + return ; + } + + function Sleep({time, children}) { + Scheduler.unstable_advanceTime(time); + return children; + } + + function App() { + Scheduler.unstable_yieldValue('App'); + return ( + + }> + + + + + }> + + + + + }> + + + + + + ); + } + + ReactNoop.render(); + + expect(Scheduler).toFlushAndYieldThrough([ + 'App', + 'First Pass A', + 'Loading B', + 'Loading C', + 'Mount A', + 'A', + ]); + expect(ReactNoop).toMatchRenderedOutput( + <> + A + Loading B + Loading C + , + ); + + expect(Scheduler).toFlushAndYieldThrough(['First Pass B', 'Mount B', 'B']); + expect(ReactNoop).toMatchRenderedOutput( + <> + A + B + Loading C + , + ); + + expect(Scheduler).toFlushAndYield(['C']); + expect(ReactNoop).toMatchRenderedOutput( + <> + A + B + C + , + ); + }); + // @gate experimental && enableProfilerTimer it('counts the actual duration when profiling a SuspenseList', async () => { // Order of parameters: id, phase, actualDuration, treeBaseDuration