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