Skip to content

Commit f444c28

Browse files
gaearonacdlite
authored andcommitted
Add a failing test for remounting fallback in sync mode
1 parent ae196e8 commit f444c28

File tree

1 file changed

+59
-0
lines changed

1 file changed

+59
-0
lines changed

packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js

+59
Original file line numberDiff line numberDiff line change
@@ -631,5 +631,64 @@ describe('ReactSuspense', () => {
631631
expect(root).toFlushAndYield(['Step: 3']);
632632
expect(root).toMatchRenderedOutput('Step: 3');
633633
});
634+
635+
it('does not remount the fallback while suspended children resolve in sync mode', () => {
636+
let mounts = 0;
637+
class ShouldMountOnce extends React.Component {
638+
componentDidMount() {
639+
mounts++;
640+
}
641+
render() {
642+
return <Text text="Loading..." />;
643+
}
644+
}
645+
646+
function App(props) {
647+
return (
648+
<Suspense maxDuration={10} fallback={<ShouldMountOnce />}>
649+
<AsyncText ms={1000} text="Child 1" />
650+
<AsyncText ms={2000} text="Child 2" />
651+
<AsyncText ms={3000} text="Child 3" />
652+
</Suspense>
653+
);
654+
}
655+
656+
const root = ReactTestRenderer.create(<App />);
657+
658+
// Initial render
659+
expect(ReactTestRenderer).toHaveYielded([
660+
'Suspend! [Child 1]',
661+
'Suspend! [Child 2]',
662+
'Suspend! [Child 3]',
663+
'Loading...',
664+
]);
665+
expect(root).toFlushAndYield([]);
666+
jest.advanceTimersByTime(1000);
667+
expect(ReactTestRenderer).toHaveYielded([
668+
'Promise resolved [Child 1]',
669+
'Child 1',
670+
'Suspend! [Child 2]',
671+
'Suspend! [Child 3]',
672+
]);
673+
jest.advanceTimersByTime(1000);
674+
expect(ReactTestRenderer).toHaveYielded([
675+
'Promise resolved [Child 2]',
676+
'Child 2',
677+
'Suspend! [Child 3]',
678+
// TODO: This suspends twice because there were two pings, once for each
679+
// time Child 2 suspended. This is only an issue in sync mode because
680+
// pings aren't batched.
681+
'Suspend! [Child 3]',
682+
]);
683+
jest.advanceTimersByTime(1000);
684+
expect(ReactTestRenderer).toHaveYielded([
685+
'Promise resolved [Child 3]',
686+
'Child 3',
687+
]);
688+
expect(root).toMatchRenderedOutput(
689+
['Child 1', 'Child 2', 'Child 3'].join(''),
690+
);
691+
expect(mounts).toBe(1);
692+
});
634693
});
635694
});

0 commit comments

Comments
 (0)