diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js index ac32642985165..b574debb5b2e8 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js @@ -631,5 +631,65 @@ describe('ReactSuspense', () => { expect(root).toFlushAndYield(['Step: 3']); expect(root).toMatchRenderedOutput('Step: 3'); }); + + it('does not remount the fallback while suspended children resolve in sync mode', () => { + let mounts = 0; + class ShouldMountOnce extends React.Component { + componentDidMount() { + mounts++; + } + render() { + return ; + } + } + + function App(props) { + return ( + }> + + + + + ); + } + + const root = ReactTestRenderer.create(); + + // Initial render + expect(ReactTestRenderer).toHaveYielded([ + 'Suspend! [Child 1]', + 'Suspend! [Child 2]', + 'Suspend! [Child 3]', + 'Loading...', + ]); + expect(root).toFlushAndYield([]); + jest.advanceTimersByTime(1000); + expect(ReactTestRenderer).toHaveYielded([ + 'Promise resolved [Child 1]', + 'Child 1', + 'Suspend! [Child 2]', + 'Suspend! [Child 3]', + 'Loading...', + ]); + jest.advanceTimersByTime(1000); + expect(ReactTestRenderer).toHaveYielded([ + 'Promise resolved [Child 2]', + 'Child 2', + 'Suspend! [Child 3]', + 'Loading...', + 'Suspend! [Child 3]', // TODO: why does this suspend twice? + 'Loading...', + ]); + jest.advanceTimersByTime(1000); + expect(ReactTestRenderer).toHaveYielded([ + 'Promise resolved [Child 3]', + 'Child 3', + ]); + expect(root).toMatchRenderedOutput( + ['Child 1', 'Child 2', 'Child 3'].join(''), + ); + // TODO: this fails. Is it by design? + expect(mounts).toBe(1); + }); }); });