diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js index d93c8bcf606ab..fd749ae45cc39 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js @@ -4008,4 +4008,76 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }, ); + + // @gate enableLegacyCache + it('recurring updates in siblings should not block expensive content in suspense boundary from committing', async () => { + const {useState} = React; + + let setText; + function UpdatingText() { + const [text, _setText] = useState('1'); + setText = _setText; + return ; + } + + function ExpensiveText({text, ms}) { + Scheduler.log(text); + Scheduler.unstable_advanceTime(ms); + return ; + } + + function App() { + return ( + <> + + }> + + + + + + + ); + } + + const root = ReactNoop.createRoot(); + root.render(); + await waitForAll(['1', 'Suspend! [Async]', 'Loading...']); + expect(root).toMatchRenderedOutput( + <> + + + , + ); + + await resolveText('Async'); + expect(root).toMatchRenderedOutput( + <> + + + , + ); + + await waitFor(['Async', 'A', 'B']); + ReactNoop.expire(10000); + await advanceTimers(10000); + setText('2'); + await waitForPaint(['2']); + + await waitFor(['Async', 'A', 'B']); + ReactNoop.expire(10000); + await advanceTimers(10000); + setText('3'); + + // TODO: At this point we want "C" to commit + await waitForPaint(['3']); + await waitFor(['Async', 'A', 'B']); + + expect(root).toMatchRenderedOutput( + <> + + + , + ); + }); });