[act] flush work correctly without a mocked scheduler (#16223)
Not returning the value of flushPassiveEffects() in flushWork() meant that with async act, we wouldn't flush all work with cascading effects. This PR fixes that oversight, and adds some tests to catch this in the future.
Sunil Pai committed
Jul 26, 2019 at 17:48 UTC
d412eec8396e9b800b2e75a2585111ffa09b4978
5 files changed
+197
-3
packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+10
@@ -130,10 +130,12 @@ function runActTests(label, render, unmount) {
130
container = document.createElement('div');
131
document.body.appendChild(container);
132
});
133
+
134
afterEach(() => {
135
unmount(container);
136
document.body.removeChild(container);
137
});
138
+
139
describe('sync', () => {
140
it('can use act to flush effects', () => {
141
function App() {
@@ -240,13 +242,16 @@ function runActTests(label, render, unmount) {
242
'An update to App inside a test was not wrapped in act(...).',
243
]);
244
});
245
+
246
describe('fake timers', () => {
247
beforeEach(() => {
248
jest.useFakeTimers();
249
});
250
+
251
afterEach(() => {
252
jest.useRealTimers();
253
});
254
+
255
it('lets a ticker update', () => {
256
function App() {
257
let [toggle, setToggle] = React.useState(0);
@@ -268,6 +273,7 @@ function runActTests(label, render, unmount) {
273
274
expect(container.innerHTML).toBe('1');
275
});
276
+
277
it('can use the async version to catch microtasks', async () => {
278
function App() {
279
let [toggle, setToggle] = React.useState(0);
@@ -289,6 +295,7 @@ function runActTests(label, render, unmount) {
295
296
expect(container.innerHTML).toBe('1');
297
});
298
+
299
it('can handle cascading promises with fake timers', async () => {
300
// this component triggers an effect, that waits a tick,
301
// then sets state. repeats this 5 times.
@@ -314,6 +321,7 @@ function runActTests(label, render, unmount) {
321
// all 5 ticks present and accounted for
322
expect(container.innerHTML).toBe('5');
323
});
324
+
325
it('flushes immediate re-renders with act', () => {
326
function App() {
327
let [ctr, setCtr] = React.useState(0);
@@ -367,6 +375,7 @@ function runActTests(label, render, unmount) {
375
);
376
});
377
});
378
+
379
describe('asynchronous tests', () => {
380
it('works with timeouts', async () => {
381
function App() {
@@ -577,6 +586,7 @@ function runActTests(label, render, unmount) {
586
});
587
}
588
});
589
+
590
describe('error propagation', () => {
591
it('propagates errors - sync', () => {
592
let err;
packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
new
+166
@@ -0,0 +1,166 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+// sanity tests to make sure act() works without a mocked scheduler
11
+
12
+let React;
13
+let ReactDOM;
14
+let act;
15
+let container;
16
+let yields;
17
+
18
+function clearYields() {
19
+ try {
20
+ return yields;
21
+ } finally {
22
+ yields = [];
23
+ }
24
+}
25
+
26
+function render(el, dom) {
27
+ ReactDOM.render(el, dom);
28
+}
29
+
30
+function unmount(dom) {
31
+ ReactDOM.unmountComponentAtNode(dom);
32
+}
33
+
34
+beforeEach(() => {
35
+ jest.resetModules();
36
+ jest.unmock('scheduler');
37
+ yields = [];
38
+ React = require('react');
39
+ ReactDOM = require('react-dom');
40
+ act = require('react-dom/test-utils').act;
41
+ container = document.createElement('div');
42
+ document.body.appendChild(container);
43
+});
44
+
45
+afterEach(() => {
46
+ unmount(container);
47
+ document.body.removeChild(container);
48
+});
49
+
50
+it('can use act to flush effects', () => {
51
+ function App() {
52
+ React.useEffect(() => {
53
+ yields.push(100);
54
+ });
55
+ return null;
56
+ }
57
+
58
+ act(() => {
59
+ render(<App />, container);
60
+ });
61
+
62
+ expect(clearYields()).toEqual([100]);
63
+});
64
+
65
+it('flushes effects on every call', () => {
66
+ function App() {
67
+ let [ctr, setCtr] = React.useState(0);
68
+ React.useEffect(() => {
69
+ yields.push(ctr);
70
+ });
71
+ return (
72
+ <button id="button" onClick={() => setCtr(x => x + 1)}>
73
+ {ctr}
74
+ </button>
75
+ );
76
+ }
77
+
78
+ act(() => {
79
+ render(<App />, container);
80
+ });
81
+
82
+ expect(clearYields()).toEqual([0]);
83
+
84
+ const button = container.querySelector('#button');
85
+ function click() {
86
+ button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
87
+ }
88
+
89
+ act(() => {
90
+ click();
91
+ click();
92
+ click();
93
+ });
94
+ // it consolidates the 3 updates, then fires the effect
95
+ expect(clearYields()).toEqual([3]);
96
+ act(click);
97
+ expect(clearYields()).toEqual([4]);
98
+ act(click);
99
+ expect(clearYields()).toEqual([5]);
100
+ expect(button.innerHTML).toEqual('5');
101
+});
102
+
103
+it("should keep flushing effects until the're done", () => {
104
+ function App() {
105
+ let [ctr, setCtr] = React.useState(0);
106
+ React.useEffect(() => {
107
+ if (ctr < 5) {
108
+ setCtr(x => x + 1);
109
+ }
110
+ });
111
+ return ctr;
112
+ }
113
+
114
+ act(() => {
115
+ render(<App />, container);
116
+ });
117
+
118
+ expect(container.innerHTML).toEqual('5');
119
+});
120
+
121
+it('should flush effects only on exiting the outermost act', () => {
122
+ function App() {
123
+ React.useEffect(() => {
124
+ yields.push(0);
125
+ });
126
+ return null;
127
+ }
128
+ // let's nest a couple of act() calls
129
+ act(() => {
130
+ act(() => {
131
+ render(<App />, container);
132
+ });
133
+ // the effect wouldn't have yielded yet because
134
+ // we're still inside an act() scope
135
+ expect(clearYields()).toEqual([]);
136
+ });
137
+ // but after exiting the last one, effects get flushed
138
+ expect(clearYields()).toEqual([0]);
139
+});
140
+
141
+it('can handle cascading promises', async () => {
142
+ // this component triggers an effect, that waits a tick,
143
+ // then sets state. repeats this 5 times.
144
+ function App() {
145
+ let [state, setState] = React.useState(0);
146
+ async function ticker() {
147
+ await null;
148
+ setState(x => x + 1);
149
+ }
150
+ React.useEffect(
151
+ () => {
152
+ yields.push(state);
153
+ ticker();
154
+ },
155
+ [Math.min(state, 4)],
156
+ );
157
+ return state;
158
+ }
159
+
160
+ await act(async () => {
161
+ render(<App />, container);
162
+ });
163
+ // all 5 ticks present and accounted for
164
+ expect(clearYields()).toEqual([0, 1, 2, 3, 4]);
165
+ expect(container.innerHTML).toBe('5');
166
+});
packages/react-dom/src/test-utils/ReactTestUtilsAct.js
+7
-1
@@ -63,7 +63,13 @@ const flushWork =
63
hasWarnedAboutMissingMockScheduler = true;
64
}
65
}
66
- while (flushPassiveEffects()) {}
66
+
67
+ let didFlushWork = false;
68
+ while (flushPassiveEffects()) {
69
+ didFlushWork = true;
70
+ }
71
+
72
+ return didFlushWork;
73
};
74
75
function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
packages/react-noop-renderer/src/createReactNoop.js
+7
-1
@@ -619,7 +619,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
619
hasWarnedAboutMissingMockScheduler = true;
620
}
621
}
622
- while (flushPassiveEffects()) {}
622
+
623
+ let didFlushWork = false;
624
+ while (flushPassiveEffects()) {
625
+ didFlushWork = true;
626
+ }
627
+
628
+ return didFlushWork;
629
};
630
631
function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
packages/react-test-renderer/src/ReactTestRendererAct.js
+7
-1
@@ -44,7 +44,13 @@ const flushWork =
44
hasWarnedAboutMissingMockScheduler = true;
45
}
46
}
47
- while (flushPassiveEffects()) {}
47
+
48
+ let didFlushWork = false;
49
+ while (flushPassiveEffects()) {
50
+ didFlushWork = true;
51
+ }
52
+
53
+ return didFlushWork;
54
};
55
56
function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {