Skip to content

Commit 5579f1d

Browse files
authored
Update test comments with explanations (#21857)
1 parent 9b76d2d commit 5579f1d

File tree

3 files changed

+38
-55
lines changed

3 files changed

+38
-55
lines changed

packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js

+17-20
Original file line numberDiff line numberDiff line change
@@ -164,34 +164,31 @@ describe('ReactHooksWithNoopRenderer', () => {
164164
expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
165165

166166
// Schedule some updates
167-
if (gate(flags => flags.enableSyncDefaultUpdates)) {
168-
React.startTransition(() => {
169-
// TODO: Batched updates need to be inside startTransition?
170-
ReactNoop.batchedUpdates(() => {
167+
act(() => {
168+
if (gate(flags => flags.enableSyncDefaultUpdates)) {
169+
React.startTransition(() => {
171170
counter.current.updateCount(1);
172171
counter.current.updateCount(count => count + 10);
173172
});
174-
});
175-
} else {
176-
ReactNoop.batchedUpdates(() => {
173+
} else {
177174
counter.current.updateCount(1);
178175
counter.current.updateCount(count => count + 10);
179-
});
180-
}
176+
}
181177

182-
// Partially flush without committing
183-
expect(Scheduler).toFlushAndYieldThrough(['Count: 11']);
184-
expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
178+
// Partially flush without committing
179+
expect(Scheduler).toFlushAndYieldThrough(['Count: 11']);
180+
expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
185181

186-
// Interrupt with a high priority update
187-
ReactNoop.flushSync(() => {
188-
ReactNoop.render(<Counter label="Total" />);
189-
});
190-
expect(Scheduler).toHaveYielded(['Total: 0']);
182+
// Interrupt with a high priority update
183+
ReactNoop.flushSync(() => {
184+
ReactNoop.render(<Counter label="Total" />);
185+
});
186+
expect(Scheduler).toHaveYielded(['Total: 0']);
191187

192-
// Resume rendering
193-
expect(Scheduler).toFlushAndYield(['Total: 11']);
194-
expect(ReactNoop.getChildren()).toEqual([span('Total: 11')]);
188+
// Resume rendering
189+
expect(Scheduler).toFlushAndYield(['Total: 11']);
190+
expect(ReactNoop.getChildren()).toEqual([span('Total: 11')]);
191+
});
195192
});
196193

197194
it('throws inside class components', () => {

packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js

+15-32
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ describe('ReactIncrementalScheduling', () => {
230230
state = {tick: 0};
231231

232232
componentDidMount() {
233-
ReactNoop.deferredUpdates(() => {
233+
React.startTransition(() => {
234234
Scheduler.unstable_yieldValue(
235235
'componentDidMount (before setState): ' + this.state.tick,
236236
);
@@ -242,7 +242,7 @@ describe('ReactIncrementalScheduling', () => {
242242
}
243243

244244
componentDidUpdate() {
245-
ReactNoop.deferredUpdates(() => {
245+
React.startTransition(() => {
246246
Scheduler.unstable_yieldValue(
247247
'componentDidUpdate: ' + this.state.tick,
248248
);
@@ -280,38 +280,21 @@ describe('ReactIncrementalScheduling', () => {
280280
expect(Scheduler).toFlushAndYield(['render: 1', 'componentDidUpdate: 1']);
281281
expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
282282

283-
// Increment the tick to 2. This will trigger an update inside cDU. Flush
284-
// the first update without flushing the second one.
285-
if (gate(flags => flags.enableSyncDefaultUpdates)) {
286-
React.startTransition(() => {
287-
instance.setState({tick: 2});
288-
});
289-
290-
// TODO: why does this flush sync?
291-
expect(Scheduler).toFlushAndYieldThrough([
292-
'render: 2',
293-
'componentDidUpdate: 2',
294-
'componentDidUpdate (before setState): 2',
295-
'componentDidUpdate (after setState): 2',
296-
'render: 3',
297-
'componentDidUpdate: 3',
298-
]);
299-
expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
300-
} else {
283+
React.startTransition(() => {
301284
instance.setState({tick: 2});
285+
});
302286

303-
expect(Scheduler).toFlushAndYieldThrough([
304-
'render: 2',
305-
'componentDidUpdate: 2',
306-
'componentDidUpdate (before setState): 2',
307-
'componentDidUpdate (after setState): 2',
308-
]);
309-
expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
310-
311-
// Now flush the cDU update.
312-
expect(Scheduler).toFlushAndYield(['render: 3', 'componentDidUpdate: 3']);
313-
expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
314-
}
287+
expect(Scheduler).toFlushUntilNextPaint([
288+
'render: 2',
289+
'componentDidUpdate: 2',
290+
'componentDidUpdate (before setState): 2',
291+
'componentDidUpdate (after setState): 2',
292+
]);
293+
expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
294+
295+
// Now flush the cDU update.
296+
expect(Scheduler).toFlushAndYield(['render: 3', 'componentDidUpdate: 3']);
297+
expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
315298
});
316299

317300
it('performs Task work even after time runs out', () => {

packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -196,11 +196,13 @@ describe('ReactIncrementalUpdates', () => {
196196
// Now flush the remaining work. Even though e and f were already processed,
197197
// they should be processed again, to ensure that the terminal state
198198
// is deterministic.
199-
// TODO: should d, e, f be flushed again first?
200199
expect(Scheduler).toFlushAndYield([
200+
// Since 'g' is in a transition, we'll process 'd' separately first.
201+
// That causes us to process 'd' with 'e' and 'f' rebased.
201202
'd',
202203
'e',
203204
'f',
205+
// Then we'll re-process everything for 'g'.
204206
'a',
205207
'b',
206208
'c',
@@ -290,18 +292,19 @@ describe('ReactIncrementalUpdates', () => {
290292
});
291293

292294
// The sync updates should have flushed, but not the async ones.
293-
// TODO: should 'd' have flushed?
294-
// TODO: should 'f' have flushed? I don't know what enqueueReplaceState is.
295295
expect(Scheduler).toHaveYielded(['e', 'f']);
296296
expect(ReactNoop.getChildren()).toEqual([span('f')]);
297297

298298
// Now flush the remaining work. Even though e and f were already processed,
299299
// they should be processed again, to ensure that the terminal state
300300
// is deterministic.
301301
expect(Scheduler).toFlushAndYield([
302+
// Since 'g' is in a transition, we'll process 'd' separately first.
303+
// That causes us to process 'd' with 'e' and 'f' rebased.
302304
'd',
303305
'e',
304306
'f',
307+
// Then we'll re-process everything for 'g'.
305308
'a',
306309
'b',
307310
'c',

0 commit comments

Comments
 (0)