Skip to content

Commit 84b320b

Browse files
committed
Add test that we don't restart for initial render
1 parent a85c1f7 commit 84b320b

File tree

1 file changed

+64
-0
lines changed

1 file changed

+64
-0
lines changed

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,70 @@ describe('ReactSuspenseWithNoopRenderer', () => {
108108
]);
109109
});
110110

111+
it('does not restart rendering for initial render', async () => {
112+
function Bar(props) {
113+
Scheduler.yieldValue('Bar');
114+
return props.children;
115+
}
116+
117+
function Foo() {
118+
Scheduler.yieldValue('Foo');
119+
return (
120+
<React.Fragment>
121+
<Suspense fallback={<Text text="Loading..." />}>
122+
<Bar>
123+
<AsyncText text="A" ms={100} />
124+
<Text text="B" />
125+
</Bar>
126+
</Suspense>
127+
<Text text="C" />
128+
<Text text="D" />
129+
</React.Fragment>
130+
);
131+
}
132+
133+
ReactNoop.render(<Foo />);
134+
expect(Scheduler).toFlushAndYieldThrough([
135+
'Foo',
136+
'Bar',
137+
// A suspends
138+
'Suspend! [A]',
139+
// But we keep rendering the siblings
140+
'B',
141+
'Loading...',
142+
'C',
143+
// We leave D incomplete.
144+
]);
145+
expect(ReactNoop.getChildren()).toEqual([]);
146+
147+
// Flush the promise completely
148+
Scheduler.advanceTime(100);
149+
await advanceTimers(100);
150+
expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
151+
152+
// Even though the promise has resolved, we should now flush
153+
// and commit the in progress render instead of restarting.
154+
expect(Scheduler).toFlushAndYield(['D']);
155+
expect(ReactNoop.getChildren()).toEqual([
156+
span('Loading...'),
157+
span('C'),
158+
span('D'),
159+
]);
160+
161+
// Await one micro task to attach the retry listeners.
162+
await null;
163+
164+
// Next, we'll flush the complete content.
165+
expect(Scheduler).toFlushAndYield(['Bar', 'A', 'B']);
166+
167+
expect(ReactNoop.getChildren()).toEqual([
168+
span('A'),
169+
span('B'),
170+
span('C'),
171+
span('D'),
172+
]);
173+
});
174+
111175
it('suspends rendering and continues later', async () => {
112176
function Bar(props) {
113177
Scheduler.yieldValue('Bar');

0 commit comments

Comments
 (0)