Update test comments with explanations (#21857)
Ricky committed
Jul 19, 2021 at 15:07 UTC
5579f1dc875c328e8155906aabe20902fc14c04a
3 files changed
+38
-55
packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+17
-20
@@ -164,34 +164,31 @@ describe('ReactHooksWithNoopRenderer', () => {
164
expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
165
166
// 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(() => {
170
counter.current.updateCount(1);
171
counter.current.updateCount(count => count + 10);
172
});
174
- });
175
- } else {
176
- ReactNoop.batchedUpdates(() => {
173
+ } else {
174
counter.current.updateCount(1);
175
counter.current.updateCount(count => count + 10);
179
- });
180
- }
176
+ }
177
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')]);
181
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']);
187
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
+ });
192
});
193
194
it('throws inside class components', () => {
packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
+15
-32
@@ -230,7 +230,7 @@ describe('ReactIncrementalScheduling', () => {
230
state = {tick: 0};
231
232
componentDidMount() {
233
- ReactNoop.deferredUpdates(() => {
233
+ React.startTransition(() => {
234
Scheduler.unstable_yieldValue(
235
'componentDidMount (before setState): ' + this.state.tick,
236
);
@@ -242,7 +242,7 @@ describe('ReactIncrementalScheduling', () => {
242
}
243
244
componentDidUpdate() {
245
- ReactNoop.deferredUpdates(() => {
245
+ React.startTransition(() => {
246
Scheduler.unstable_yieldValue(
247
'componentDidUpdate: ' + this.state.tick,
248
);
@@ -280,38 +280,21 @@ describe('ReactIncrementalScheduling', () => {
280
expect(Scheduler).toFlushAndYield(['render: 1', 'componentDidUpdate: 1']);
281
expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
282
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(() => {
284
instance.setState({tick: 2});
285
+ });
286
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} />);
298
});
299
300
it('performs Task work even after time runs out', () => {
packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+6
-3
@@ -196,11 +196,13 @@ describe('ReactIncrementalUpdates', () => {
196
// Now flush the remaining work. Even though e and f were already processed,
197
// they should be processed again, to ensure that the terminal state
198
// is deterministic.
199
- // TODO: should d, e, f be flushed again first?
199
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.
202
'd',
203
'e',
204
'f',
205
+ // Then we'll re-process everything for 'g'.
206
'a',
207
'b',
208
'c',
@@ -290,8 +292,6 @@ describe('ReactIncrementalUpdates', () => {
292
});
293
294
// 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.
295
expect(Scheduler).toHaveYielded(['e', 'f']);
296
expect(ReactNoop.getChildren()).toEqual([span('f')]);
297
@@ -299,9 +299,12 @@ describe('ReactIncrementalUpdates', () => {
299
// they should be processed again, to ensure that the terminal state
300
// is deterministic.
301
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.
304
'd',
305
'e',
306
'f',
307
+ // Then we'll re-process everything for 'g'.
308
'a',
309
'b',
310
'c',