@samitouri / QOS-React-2 / commits / 703c67560d

Codemod act -> await act (1/?) (#26334)

Similar to the rationale for `waitFor` (see https://github.com/facebook/react/pull/26285), we should always await the result of an `act` call so that microtasks have a chance to fire. This only affects the internal `act` that we use in our repo, for now. In the public `act` API, we don't yet require this; however, we effectively will for any update that triggers suspense once `use` lands. So we likely will start warning in an upcoming minor.

Andrew Clark committed Mar 7, 2023 at 10:15 UTC 703c67560d1b5e5d32170cd513cda52559933527
12 files changed +202 -212
packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+19 -23
@@ -26,7 +26,7 @@ describe('ReactHooksInspectionIntegration', () => {
26 ReactDebugTools = require('react-debug-tools');
27 });
28
29 - it('should inspect the current state of useState hooks', () => {
29 + it('should inspect the current state of useState hooks', async () => {
30 const useState = React.useState;
31 function Foo(props) {
32 const [state1, setState1] = useState('hello');
@@ -61,7 +61,7 @@ describe('ReactHooksInspectionIntegration', () => {
61 const {onMouseDown: setStateA, onMouseUp: setStateB} =
62 renderer.root.findByType('div').props;
63
64 - act(() => setStateA('Hi'));
64 + await act(async () => setStateA('Hi'));
65
66 childFiber = renderer.root.findByType(Foo)._currentFiber();
67 tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -83,7 +83,7 @@ describe('ReactHooksInspectionIntegration', () => {
83 },
84 ]);
85
86 - act(() => setStateB('world!'));
86 + await act(async () => setStateB('world!'));
87
88 childFiber = renderer.root.findByType(Foo)._currentFiber();
89 tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -106,7 +106,7 @@ describe('ReactHooksInspectionIntegration', () => {
106 ]);
107 });
108
109 - it('should inspect the current state of all stateful hooks', () => {
109 + it('should inspect the current state of all stateful hooks', async () => {
110 const outsideRef = React.createRef();
111 function effect() {}
112 function Foo(props) {
@@ -129,12 +129,8 @@ describe('ReactHooksInspectionIntegration', () => {
129 React.useMemo(() => state1 + state2, [state1]);
130
131 function update() {
132 - act(() => {
133 - setState('A');
134 - });
135 - act(() => {
136 - dispatch({value: 'B'});
137 - });
132 + setState('A');
133 + dispatch({value: 'B'});
134 ref.current = 'C';
135 }
136 const memoizedUpdate = React.useCallback(update, []);
@@ -145,7 +141,7 @@ describe('ReactHooksInspectionIntegration', () => {
141 );
142 }
143 let renderer;
148 - act(() => {
144 + await act(async () => {
145 renderer = ReactTestRenderer.create(<Foo prop="prop" />);
146 });
147
@@ -207,7 +203,9 @@ describe('ReactHooksInspectionIntegration', () => {
203 },
204 ]);
205
210 - updateStates();
206 + await act(async () => {
207 + updateStates();
208 + });
209
210 childFiber = renderer.root.findByType(Foo)._currentFiber();
211 tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -266,7 +264,7 @@ describe('ReactHooksInspectionIntegration', () => {
264 ]);
265 });
266
269 - it('should inspect the current state of all stateful hooks, including useInsertionEffect', () => {
267 + it('should inspect the current state of all stateful hooks, including useInsertionEffect', async () => {
268 const useInsertionEffect = React.useInsertionEffect;
269 const outsideRef = React.createRef();
270 function effect() {}
@@ -290,13 +288,9 @@ describe('ReactHooksInspectionIntegration', () => {
288
289 React.useMemo(() => state1 + state2, [state1]);
290
293 - function update() {
294 - act(() => {
295 - setState('A');
296 - });
297 - act(() => {
298 - dispatch({value: 'B'});
299 - });
291 + async function update() {
292 + setState('A');
293 + dispatch({value: 'B'});
294 ref.current = 'C';
295 }
296 const memoizedUpdate = React.useCallback(update, []);
@@ -307,7 +301,7 @@ describe('ReactHooksInspectionIntegration', () => {
301 );
302 }
303 let renderer;
310 - act(() => {
304 + await act(async () => {
305 renderer = ReactTestRenderer.create(<Foo prop="prop" />);
306 });
307
@@ -376,7 +370,9 @@ describe('ReactHooksInspectionIntegration', () => {
370 },
371 ]);
372
379 - updateStates();
373 + await act(async () => {
374 + updateStates();
375 + });
376
377 childFiber = renderer.root.findByType(Foo)._currentFiber();
378 tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -967,7 +963,7 @@ describe('ReactHooksInspectionIntegration', () => {
963
964 // This test case is based on an open source bug report:
965 // https://github.com/facebookincubator/redux-react-hook/issues/34#issuecomment-466693787
970 - it('should properly advance the current hook for useContext', () => {
966 + it('should properly advance the current hook for useContext', async () => {
967 const MyContext = React.createContext(1);
968
969 let incrementCount;
packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
+60 -64
@@ -17,6 +17,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
17 let NoError;
18 let container;
19 let windowOnError;
20 + let waitForThrow;
21
22 beforeEach(() => {
23 jest.resetModules();
@@ -25,6 +26,9 @@ describe('ReactDOMConsoleErrorReporting', () => {
26 ReactDOM = require('react-dom');
27 ReactDOMClient = require('react-dom/client');
28
29 + const InternalTestUtils = require('internal-test-utils');
30 + waitForThrow = InternalTestUtils.waitForThrow;
31 +
32 ErrorBoundary = class extends React.Component {
33 state = {error: null};
34 static getDerivedStateFromError(error) {
@@ -53,7 +57,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
57 });
58
59 describe('ReactDOMClient.createRoot', () => {
56 - it('logs errors during event handlers', () => {
60 + it('logs errors during event handlers', async () => {
61 spyOnDevAndProd(console, 'error');
62
63 function Foo() {
@@ -68,11 +72,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
72 }
73
74 const root = ReactDOMClient.createRoot(container);
71 - act(() => {
75 + await act(async () => {
76 root.render(<Foo />);
77 });
78
75 - act(() => {
79 + await act(async () => {
80 container.firstChild.dispatchEvent(
81 new MouseEvent('click', {
82 bubbles: true,
@@ -142,7 +146,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
146 // Check next render doesn't throw.
147 windowOnError.mockReset();
148 console.error.mockReset();
145 - act(() => {
149 + await act(async () => {
150 root.render(<NoError />);
151 });
152 expect(container.textContent).toBe('OK');
@@ -152,7 +156,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
156 }
157 });
158
155 - it('logs render errors without an error boundary', () => {
159 + it('logs render errors without an error boundary', async () => {
160 spyOnDevAndProd(console, 'error');
161
162 function Foo() {
@@ -160,11 +164,10 @@ describe('ReactDOMConsoleErrorReporting', () => {
164 }
165
166 const root = ReactDOMClient.createRoot(container);
163 - expect(() => {
164 - act(() => {
165 - root.render(<Foo />);
166 - });
167 - }).toThrow('Boom');
167 + await act(async () => {
168 + root.render(<Foo />);
169 + await waitForThrow('Boom');
170 + });
171
172 if (__DEV__) {
173 expect(windowOnError.mock.calls).toEqual([
@@ -226,7 +229,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
229 // Check next render doesn't throw.
230 windowOnError.mockReset();
231 console.error.mockReset();
229 - act(() => {
232 + await act(async () => {
233 root.render(<NoError />);
234 });
235 expect(container.textContent).toBe('OK');
@@ -236,7 +239,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
239 }
240 });
241
239 - it('logs render errors with an error boundary', () => {
242 + it('logs render errors with an error boundary', async () => {
243 spyOnDevAndProd(console, 'error');
244
245 function Foo() {
@@ -244,7 +247,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
247 }
248
249 const root = ReactDOMClient.createRoot(container);
247 - act(() => {
250 + await act(async () => {
251 root.render(
252 <ErrorBoundary>
253 <Foo />
@@ -312,7 +315,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
315 // Check next render doesn't throw.
316 windowOnError.mockReset();
317 console.error.mockReset();
315 - act(() => {
318 + await act(async () => {
319 root.render(<NoError />);
320 });
321 expect(container.textContent).toBe('OK');
@@ -322,7 +325,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
325 }
326 });
327
325 - it('logs layout effect errors without an error boundary', () => {
328 + it('logs layout effect errors without an error boundary', async () => {
329 spyOnDevAndProd(console, 'error');
330
331 function Foo() {
@@ -333,11 +336,10 @@ describe('ReactDOMConsoleErrorReporting', () => {
336 }
337
338 const root = ReactDOMClient.createRoot(container);
336 - expect(() => {
337 - act(() => {
338 - root.render(<Foo />);
339 - });
340 - }).toThrow('Boom');
339 + await act(async () => {
340 + root.render(<Foo />);
341 + await waitForThrow('Boom');
342 + });
343
344 if (__DEV__) {
345 expect(windowOnError.mock.calls).toEqual([
@@ -382,7 +384,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
384 // Check next render doesn't throw.
385 windowOnError.mockReset();
386 console.error.mockReset();
385 - act(() => {
387 + await act(async () => {
388 root.render(<NoError />);
389 });
390 expect(container.textContent).toBe('OK');
@@ -392,7 +394,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
394 }
395 });
396
395 - it('logs layout effect errors with an error boundary', () => {
397 + it('logs layout effect errors with an error boundary', async () => {
398 spyOnDevAndProd(console, 'error');
399
400 function Foo() {
@@ -403,7 +405,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
405 }
406
407 const root = ReactDOMClient.createRoot(container);
406 - act(() => {
408 + await act(async () => {
409 root.render(
410 <ErrorBoundary>
411 <Foo />
@@ -454,7 +456,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
456 // Check next render doesn't throw.
457 windowOnError.mockReset();
458 console.error.mockReset();
457 - act(() => {
459 + await act(async () => {
460 root.render(<NoError />);
461 });
462 expect(container.textContent).toBe('OK');
@@ -464,7 +466,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
466 }
467 });
468
467 - it('logs passive effect errors without an error boundary', () => {
469 + it('logs passive effect errors without an error boundary', async () => {
470 spyOnDevAndProd(console, 'error');
471
472 function Foo() {
@@ -475,11 +477,10 @@ describe('ReactDOMConsoleErrorReporting', () => {
477 }
478
479 const root = ReactDOMClient.createRoot(container);
478 - expect(() => {
479 - act(() => {
480 - root.render(<Foo />);
481 - });
482 - }).toThrow('Boom');
480 + await act(async () => {
481 + root.render(<Foo />);
482 + await waitForThrow('Boom');
483 + });
484
485 if (__DEV__) {
486 expect(windowOnError.mock.calls).toEqual([
@@ -524,7 +525,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
525 // Check next render doesn't throw.
526 windowOnError.mockReset();
527 console.error.mockReset();
527 - act(() => {
528 + await act(async () => {
529 root.render(<NoError />);
530 });
531 expect(container.textContent).toBe('OK');
@@ -534,7 +535,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
535 }
536 });
537
537 - it('logs passive effect errors with an error boundary', () => {
538 + it('logs passive effect errors with an error boundary', async () => {
539 spyOnDevAndProd(console, 'error');
540
541 function Foo() {
@@ -545,7 +546,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
546 }
547
548 const root = ReactDOMClient.createRoot(container);
548 - act(() => {
549 + await act(async () => {
550 root.render(
551 <ErrorBoundary>
552 <Foo />
@@ -596,7 +597,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
597 // Check next render doesn't throw.
598 windowOnError.mockReset();
599 console.error.mockReset();
599 - act(() => {
600 + await act(async () => {
601 root.render(<NoError />);
602 });
603 expect(container.textContent).toBe('OK');
@@ -608,7 +609,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
609 });
610
611 describe('ReactDOM.render', () => {
611 - it('logs errors during event handlers', () => {
612 + it('logs errors during event handlers', async () => {
613 spyOnDevAndProd(console, 'error');
614
615 function Foo() {
@@ -622,11 +623,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
623 );
624 }
625
625 - act(() => {
626 + await act(async () => {
627 ReactDOM.render(<Foo />, container);
628 });
629
629 - act(() => {
630 + await act(async () => {
631 container.firstChild.dispatchEvent(
632 new MouseEvent('click', {
633 bubbles: true,
@@ -697,7 +698,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
698 // Check next render doesn't throw.
699 windowOnError.mockReset();
700 console.error.mockReset();
700 - act(() => {
701 + await act(async () => {
702 ReactDOM.render(<NoError />, container);
703 });
704 expect(container.textContent).toBe('OK');
@@ -709,7 +710,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
710 }
711 });
712
712 - it('logs render errors without an error boundary', () => {
713 + it('logs render errors without an error boundary', async () => {
714 spyOnDevAndProd(console, 'error');
715
716 function Foo() {
@@ -717,9 +718,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
718 }
719
720 expect(() => {
720 - act(() => {
721 - ReactDOM.render(<Foo />, container);
722 - });
721 + ReactDOM.render(<Foo />, container);
722 }).toThrow('Boom');
723
724 if (__DEV__) {
@@ -766,7 +765,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
765 // Check next render doesn't throw.
766 windowOnError.mockReset();
767 console.error.mockReset();
769 - act(() => {
768 + await act(async () => {
769 ReactDOM.render(<NoError />, container);
770 });
771 expect(container.textContent).toBe('OK');
@@ -778,14 +777,14 @@ describe('ReactDOMConsoleErrorReporting', () => {
777 }
778 });
779
781 - it('logs render errors with an error boundary', () => {
780 + it('logs render errors with an error boundary', async () => {
781 spyOnDevAndProd(console, 'error');
782
783 function Foo() {
784 throw Error('Boom');
785 }
786
788 - act(() => {
787 + await act(async () => {
788 ReactDOM.render(
789 <ErrorBoundary>
790 <Foo />
@@ -838,7 +837,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
837 // Check next render doesn't throw.
838 windowOnError.mockReset();
839 console.error.mockReset();
841 - act(() => {
840 + await act(async () => {
841 ReactDOM.render(<NoError />, container);
842 });
843 expect(container.textContent).toBe('OK');
@@ -850,7 +849,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
849 }
850 });
851
853 - it('logs layout effect errors without an error boundary', () => {
852 + it('logs layout effect errors without an error boundary', async () => {
853 spyOnDevAndProd(console, 'error');
854
855 function Foo() {
@@ -861,9 +860,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
860 }
861
862 expect(() => {
864 - act(() => {
865 - ReactDOM.render(<Foo />, container);
866 - });
863 + ReactDOM.render(<Foo />, container);
864 }).toThrow('Boom');
865
866 if (__DEV__) {
@@ -910,7 +907,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
907 // Check next render doesn't throw.
908 windowOnError.mockReset();
909 console.error.mockReset();
913 - act(() => {
910 + await act(async () => {
911 ReactDOM.render(<NoError />, container);
912 });
913 expect(container.textContent).toBe('OK');
@@ -922,7 +919,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
919 }
920 });
921
925 - it('logs layout effect errors with an error boundary', () => {
922 + it('logs layout effect errors with an error boundary', async () => {
923 spyOnDevAndProd(console, 'error');
924
925 function Foo() {
@@ -932,7 +929,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
929 return null;
930 }
931
935 - act(() => {
932 + await act(async () => {
933 ReactDOM.render(
934 <ErrorBoundary>
935 <Foo />
@@ -985,7 +982,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
982 // Check next render doesn't throw.
983 windowOnError.mockReset();
984 console.error.mockReset();
988 - act(() => {
985 + await act(async () => {
986 ReactDOM.render(<NoError />, container);
987 });
988 expect(container.textContent).toBe('OK');
@@ -997,7 +994,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
994 }
995 });
996
1000 - it('logs passive effect errors without an error boundary', () => {
997 + it('logs passive effect errors without an error boundary', async () => {
998 spyOnDevAndProd(console, 'error');
999
1000 function Foo() {
@@ -1007,11 +1004,10 @@ describe('ReactDOMConsoleErrorReporting', () => {
1004 return null;
1005 }
1006
1010 - expect(() => {
1011 - act(() => {
1012 - ReactDOM.render(<Foo />, container);
1013 - });
1014 - }).toThrow('Boom');
1007 + await act(async () => {
1008 + ReactDOM.render(<Foo />, container);
1009 + await waitForThrow('Boom');
1010 + });
1011
1012 if (__DEV__) {
1013 expect(windowOnError.mock.calls).toEqual([
@@ -1057,7 +1053,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
1053 // Check next render doesn't throw.
1054 windowOnError.mockReset();
1055 console.error.mockReset();
1060 - act(() => {
1056 + await act(async () => {
1057 ReactDOM.render(<NoError />, container);
1058 });
1059 expect(container.textContent).toBe('OK');
@@ -1069,7 +1065,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
1065 }
1066 });
1067
1072 - it('logs passive effect errors with an error boundary', () => {
1068 + it('logs passive effect errors with an error boundary', async () => {
1069 spyOnDevAndProd(console, 'error');
1070
1071 function Foo() {
@@ -1079,7 +1075,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
1075 return null;
1076 }
1077
1082 - act(() => {
1078 + await act(async () => {
1079 ReactDOM.render(
1080 <ErrorBoundary>
1081 <Foo />
@@ -1132,7 +1128,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
1128 // Check next render doesn't throw.
1129 windowOnError.mockReset();
1130 console.error.mockReset();
1135 - act(() => {
1131 + await act(async () => {
1132 ReactDOM.render(<NoError />, container);
1133 });
1134 expect(container.textContent).toBe('OK');
packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+2 -2
@@ -620,7 +620,7 @@ describe('ReactDOMFiberAsync', () => {
620 expect(container.textContent).toEqual('ABC');
621 });
622
623 - it('unmounted roots should never clear newer root content from a container', () => {
623 + it('unmounted roots should never clear newer root content from a container', async () => {
624 const ref = React.createRef();
625
626 function OldApp() {
@@ -643,7 +643,7 @@ describe('ReactDOMFiberAsync', () => {
643 }
644
645 const oldRoot = ReactDOMClient.createRoot(container);
646 - act(() => {
646 + await act(async () => {
647 oldRoot.render(<OldApp />);
648 });
649
packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+1 -1
@@ -74,7 +74,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
74 }
75
76 const root = ReactDOMClient.createRoot(container);
77 - await act(() => {
77 + await act(async () => {
78 root.render(<Form />);
79 });
80
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+21 -21
@@ -509,8 +509,8 @@ describe('ReactDOMServerPartialHydration', () => {
509 expect(container.innerHTML).toContain('<span>B</span>');
510 expect(ref.current).toBe(null);
511
512 - expect(() => {
513 - act(() => {
512 + await expect(async () => {
513 + await act(async () => {
514 ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
515 onRecoverableError(error) {
516 Scheduler.log(error.message);
@@ -579,7 +579,7 @@ describe('ReactDOMServerPartialHydration', () => {
579 expect(ref.current).toBe(null);
580
581 shouldSuspend = true;
582 - act(() => {
582 + await act(async () => {
583 ReactDOMClient.hydrateRoot(container, <App hasB={false} />);
584 });
585
@@ -635,8 +635,8 @@ describe('ReactDOMServerPartialHydration', () => {
635 expect(container.innerHTML).toContain('<span>B</span>');
636 expect(ref.current).toBe(null);
637
638 - expect(() => {
639 - act(() => {
638 + await expect(async () => {
639 + await act(async () => {
640 ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
641 onRecoverableError(error) {
642 Scheduler.log(error.message);
@@ -698,7 +698,7 @@ describe('ReactDOMServerPartialHydration', () => {
698
699 expect(deleted.length).toBe(0);
700
701 - act(() => {
701 + await act(async () => {
702 root.render(<App deleted={true} />);
703 });
704
@@ -743,8 +743,8 @@ describe('ReactDOMServerPartialHydration', () => {
743
744 // On the client we try to hydrate.
745 suspend = true;
746 - expect(() => {
747 - act(() => {
746 + await expect(async () => {
747 + await act(async () => {
748 ReactDOM.hydrate(<App />, container);
749 });
750 }).toErrorDev(
@@ -785,7 +785,7 @@ describe('ReactDOMServerPartialHydration', () => {
785 expect(container.textContent).toBe('Hello');
786 });
787
788 - it('can insert siblings before the dehydrated boundary', () => {
788 + it('can insert siblings before the dehydrated boundary', async () => {
789 let suspend = false;
790 const promise = new Promise(() => {});
791 let showSibling;
@@ -829,20 +829,20 @@ describe('ReactDOMServerPartialHydration', () => {
829 // hydrating anyway.
830 suspend = true;
831
832 - act(() => {
832 + await act(async () => {
833 ReactDOMClient.hydrateRoot(container, <App />);
834 });
835
836 expect(container.firstChild.firstChild.tagName).not.toBe('DIV');
837
838 // In this state, we can still update the siblings.
839 - act(() => showSibling());
839 + await act(async () => showSibling());
840
841 expect(container.firstChild.firstChild.tagName).toBe('DIV');
842 expect(container.firstChild.firstChild.textContent).toBe('First');
843 });
844
845 - it('can delete the dehydrated boundary before it is hydrated', () => {
845 + it('can delete the dehydrated boundary before it is hydrated', async () => {
846 let suspend = false;
847 const promise = new Promise(() => {});
848 let hideMiddle;
@@ -885,14 +885,14 @@ describe('ReactDOMServerPartialHydration', () => {
885 // On the client we don't have all data yet but we want to start
886 // hydrating anyway.
887 suspend = true;
888 - act(() => {
888 + await act(async () => {
889 ReactDOMClient.hydrateRoot(container, <App />);
890 });
891
892 expect(container.firstChild.children[1].textContent).toBe('Middle');
893
894 // In this state, we can still delete the boundary.
895 - act(() => hideMiddle());
895 + await act(async () => hideMiddle());
896
897 expect(container.firstChild.children[1].textContent).toBe('After');
898 });
@@ -1880,7 +1880,7 @@ describe('ReactDOMServerPartialHydration', () => {
1880 expect(container.textContent).toBe('AB');
1881
1882 // Add more rows before we've hydrated the first two.
1883 - act(() => {
1883 + await act(async () => {
1884 root.render(<App showMore={true} />);
1885 });
1886
@@ -3414,8 +3414,8 @@ describe('ReactDOMServerPartialHydration', () => {
3414 document.body.appendChild(container);
3415 container.innerHTML = finalHTML;
3416
3417 - expect(() => {
3418 - act(() => {
3417 + await expect(async () => {
3418 + await act(async () => {
3419 ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
3420 onRecoverableError(error) {
3421 Scheduler.log('Log recoverable error: ' + error.message);
@@ -3461,8 +3461,8 @@ describe('ReactDOMServerPartialHydration', () => {
3461 container.innerHTML = ReactDOMServer.renderToString(
3462 <DirectTextChild text="good" />,
3463 );
3464 - expect(() => {
3465 - act(() => {
3464 + await expect(async () => {
3465 + await act(async () => {
3466 ReactDOMClient.hydrateRoot(container, <DirectTextChild text="bad" />, {
3467 onRecoverableError(error) {
3468 Scheduler.log(error.message);
@@ -3502,8 +3502,8 @@ describe('ReactDOMServerPartialHydration', () => {
3502 container2.innerHTML = ReactDOMServer.renderToString(
3503 <TextChildWithSibling text="good" />,
3504 );
3505 - expect(() => {
3506 - act(() => {
3505 + await expect(async () => {
3506 + await act(async () => {
3507 ReactDOMClient.hydrateRoot(
3508 container2,
3509 <TextChildWithSibling text="bad" />,
packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+2 -2
@@ -1862,9 +1862,9 @@ describe('ReactErrorBoundaries', () => {
1862 assertLog(['ErrorBoundary componentWillUnmount']);
1863 });
1864
1865 - it('catches errors in useEffect', () => {
1865 + it('catches errors in useEffect', async () => {
1866 const container = document.createElement('div');
1867 - act(() => {
1867 + await act(async () => {
1868 ReactDOM.render(
1869 <ErrorBoundary>
1870 <BrokenUseEffect>Initial value</BrokenUseEffect>
packages/react-dom/src/__tests__/ReactUpdates-test.js
+15 -17
@@ -1622,7 +1622,7 @@ describe('ReactUpdates', () => {
1622
1623 // TODO: Replace this branch with @gate pragmas
1624 if (__DEV__) {
1625 - it('warns about a deferred infinite update loop with useEffect', () => {
1625 + it('warns about a deferred infinite update loop with useEffect', async () => {
1626 function NonTerminating() {
1627 const [step, setStep] = React.useState(0);
1628 React.useEffect(() => {
@@ -1646,24 +1646,22 @@ describe('ReactUpdates', () => {
1646 try {
1647 const container = document.createElement('div');
1648 expect(() => {
1649 - act(() => {
1650 - ReactDOM.render(<App />, container);
1651 - while (error === null) {
1652 - Scheduler.unstable_flushNumberOfYields(1);
1653 - Scheduler.unstable_clearLog();
1654 - }
1655 - expect(error).toContain('Warning: Maximum update depth exceeded.');
1656 - expect(stack).toContain(' NonTerminating');
1657 - // rethrow error to prevent going into an infinite loop when act() exits
1658 - throw error;
1659 - });
1649 + ReactDOM.render(<App />, container);
1650 + while (error === null) {
1651 + Scheduler.unstable_flushNumberOfYields(1);
1652 + Scheduler.unstable_clearLog();
1653 + }
1654 + expect(error).toContain('Warning: Maximum update depth exceeded.');
1655 + expect(stack).toContain(' NonTerminating');
1656 + // rethrow error to prevent going into an infinite loop when act() exits
1657 + throw error;
1658 }).toThrow('Maximum update depth exceeded.');
1659 } finally {
1660 console.error = originalConsoleError;
1661 }
1662 });
1663
1666 - it('can have nested updates if they do not cross the limit', () => {
1664 + it('can have nested updates if they do not cross the limit', async () => {
1665 let _setStep;
1666 const LIMIT = 50;
1667
@@ -1680,17 +1678,17 @@ describe('ReactUpdates', () => {
1678 }
1679
1680 const container = document.createElement('div');
1683 - act(() => {
1681 + await act(async () => {
1682 ReactDOM.render(<Terminating />, container);
1683 });
1684 expect(container.textContent).toBe('50');
1687 - act(() => {
1685 + await act(async () => {
1686 _setStep(0);
1687 });
1688 expect(container.textContent).toBe('50');
1689 });
1690
1693 - it('can have many updates inside useEffect without triggering a warning', () => {
1691 + it('can have many updates inside useEffect without triggering a warning', async () => {
1692 function Terminating() {
1693 const [step, setStep] = React.useState(0);
1694 React.useEffect(() => {
@@ -1703,7 +1701,7 @@ describe('ReactUpdates', () => {
1701 }
1702
1703 const container = document.createElement('div');
1706 - act(() => {
1704 + await act(async () => {
1705 ReactDOM.render(<Terminating />, container);
1706 });
1707
packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
+10 -10
@@ -298,7 +298,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
298 });
299
300 // @gate www
301 - it('should correctly handle focus visibility when typing into an input', () => {
301 + it('should correctly handle focus visibility when typing into an input', async () => {
302 const onFocusWithinVisibleChange = jest.fn();
303 const ref = React.createRef();
304 const inputRef = React.createRef();
@@ -312,7 +312,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
312 </div>
313 );
314 };
315 - act(() => {
315 + await act(async () => {
316 ReactDOM.render(<Component />, container);
317 });
318
@@ -477,7 +477,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
477 });
478
479 // @gate www
480 - it('is called after a focused suspended element is hidden', () => {
480 + it('is called after a focused suspended element is hidden', async () => {
481 const Suspense = React.Suspense;
482 let suspend = false;
483 let resolve;
@@ -508,7 +508,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
508
509 const root = ReactDOMClient.createRoot(container2);
510
511 - act(() => {
511 + await act(async () => {
512 root.render(<Component />);
513 });
514 jest.runAllTimers();
@@ -522,7 +522,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
522 expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
523
524 suspend = true;
525 - act(() => {
525 + await act(async () => {
526 root.render(<Component />);
527 });
528 jest.runAllTimers();
@@ -535,7 +535,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
535 });
536
537 // @gate www
538 - it('is called after a focused suspended element is hidden then shown', () => {
538 + it('is called after a focused suspended element is hidden then shown', async () => {
539 const Suspense = React.Suspense;
540 let suspend = false;
541 let resolve;
@@ -567,7 +567,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
567
568 const root = ReactDOMClient.createRoot(container2);
569
570 - act(() => {
570 + await act(async () => {
571 root.render(<Component />);
572 });
573 jest.runAllTimers();
@@ -576,14 +576,14 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
576 expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
577
578 suspend = true;
579 - act(() => {
579 + await act(async () => {
580 root.render(<Component />);
581 });
582 jest.runAllTimers();
583 expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
584 expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
585
586 - act(() => {
586 + await act(async () => {
587 root.render(<Component />);
588 });
589 jest.runAllTimers();
@@ -592,7 +592,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
592
593 buttonRef.current.focus();
594 suspend = false;
595 - act(() => {
595 + await act(async () => {
596 root.render(<Component />);
597 });
598 jest.runAllTimers();
packages/react/src/__tests__/ReactProfiler-test.internal.js
+50 -50
@@ -270,7 +270,7 @@ describe(`onRender`, () => {
270 jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
271 });
272
273 - it('does not report work done on a sibling', () => {
273 + it('does not report work done on a sibling', async () => {
274 const callback = jest.fn();
275
276 const DoesNotUpdate = React.memo(
@@ -646,7 +646,7 @@ describe(`onRender`, () => {
646 expect(updateCall[5]).toBe(43); // commit time
647 });
648
649 - it('should clear nested-update flag when multiple cascading renders are scheduled', () => {
649 + it('should clear nested-update flag when multiple cascading renders are scheduled', async () => {
650 loadModules({
651 useNoopRenderer: true,
652 });
@@ -672,7 +672,7 @@ describe(`onRender`, () => {
672
673 const onRender = jest.fn();
674
675 - act(() => {
675 + await act(async () => {
676 ReactNoop.render(
677 <React.Profiler id="root" onRender={onRender}>
678 <Component />
@@ -1569,7 +1569,7 @@ describe(`onCommit`, () => {
1569 expect(call[3]).toBe(1011); // commit start time (before mutations or effects)
1570 });
1571
1572 - it('should bubble time spent in layout effects to higher profilers', () => {
1572 + it('should bubble time spent in layout effects to higher profilers', async () => {
1573 const callback = jest.fn();
1574
1575 const ComponentWithEffects = ({cleanupDuration, duration, setCountRef}) => {
@@ -1590,7 +1590,7 @@ describe(`onCommit`, () => {
1590 const setCountRef = React.createRef(null);
1591
1592 let renderer = null;
1593 - act(() => {
1593 + await act(async () => {
1594 renderer = ReactTestRenderer.create(
1595 <React.Profiler id="root-mount" onCommit={callback}>
1596 <React.Profiler id="a">
@@ -1617,7 +1617,7 @@ describe(`onCommit`, () => {
1617 expect(call[2]).toBe(1010); // durations
1618 expect(call[3]).toBe(2); // commit start time (before mutations or effects)
1619
1620 - act(() => setCountRef.current(count => count + 1));
1620 + await act(async () => setCountRef.current(count => count + 1));
1621
1622 expect(callback).toHaveBeenCalledTimes(2);
1623
@@ -1629,7 +1629,7 @@ describe(`onCommit`, () => {
1629 expect(call[2]).toBe(110); // durations
1630 expect(call[3]).toBe(1013); // commit start time (before mutations or effects)
1631
1632 - act(() => {
1632 + await act(async () => {
1633 renderer.update(
1634 <React.Profiler id="root-update" onCommit={callback}>
1635 <React.Profiler id="b">
@@ -1650,7 +1650,7 @@ describe(`onCommit`, () => {
1650 expect(call[3]).toBe(1124); // commit start time (before mutations or effects)
1651 });
1652
1653 - it('should properly report time in layout effects even when there are errors', () => {
1653 + it('should properly report time in layout effects even when there are errors', async () => {
1654 const callback = jest.fn();
1655
1656 class ErrorBoundary extends React.Component {
@@ -1688,7 +1688,7 @@ describe(`onCommit`, () => {
1688
1689 // Test an error that happens during an effect
1690
1691 - act(() => {
1691 + await act(async () => {
1692 ReactTestRenderer.create(
1693 <React.Profiler id="root" onCommit={callback}>
1694 <ErrorBoundary
@@ -1736,7 +1736,7 @@ describe(`onCommit`, () => {
1736 expect(call[3]).toBe(10110111); // commit start time (before mutations or effects)
1737 });
1738
1739 - it('should properly report time in layout effect cleanup functions even when there are errors', () => {
1739 + it('should properly report time in layout effect cleanup functions even when there are errors', async () => {
1740 const callback = jest.fn();
1741
1742 class ErrorBoundary extends React.Component {
@@ -1774,7 +1774,7 @@ describe(`onCommit`, () => {
1774
1775 let renderer = null;
1776
1777 - act(() => {
1777 + await act(async () => {
1778 renderer = ReactTestRenderer.create(
1779 <React.Profiler id="root" onCommit={callback}>
1780 <ErrorBoundary
@@ -1816,7 +1816,7 @@ describe(`onCommit`, () => {
1816
1817 // Test an error that happens during an cleanup function
1818
1819 - act(() => {
1819 + await act(async () => {
1820 renderer.update(
1821 <React.Profiler id="root" onCommit={callback}>
1822 <ErrorBoundary
@@ -1901,7 +1901,7 @@ describe(`onPostCommit`, () => {
1901 Scheduler.unstable_advanceTime(1);
1902
1903 let renderer;
1904 - act(() => {
1904 + await act(async () => {
1905 renderer = ReactTestRenderer.create(
1906 <React.Profiler id="mount-test" onPostCommit={callback}>
1907 <ComponentWithEffects />
@@ -1922,7 +1922,7 @@ describe(`onPostCommit`, () => {
1922
1923 Scheduler.unstable_advanceTime(1);
1924
1925 - act(() => {
1925 + await act(async () => {
1926 renderer.update(
1927 <React.Profiler id="update-test" onPostCommit={callback}>
1928 <ComponentWithEffects />
@@ -1943,7 +1943,7 @@ describe(`onPostCommit`, () => {
1943
1944 Scheduler.unstable_advanceTime(1);
1945
1946 - act(() => {
1946 + await act(async () => {
1947 renderer.update(
1948 <React.Profiler id="unmount-test" onPostCommit={callback} />,
1949 );
@@ -1965,7 +1965,7 @@ describe(`onPostCommit`, () => {
1965 expect(call[3]).toBe(12030); // commit start time (before mutations or effects)
1966 });
1967
1968 - it('should report time spent in passive effects with cascading renders', () => {
1968 + it('should report time spent in passive effects with cascading renders', async () => {
1969 const callback = jest.fn();
1970
1971 const ComponentWithEffects = () => {
@@ -1985,7 +1985,7 @@ describe(`onPostCommit`, () => {
1985
1986 Scheduler.unstable_advanceTime(1);
1987
1988 - act(() => {
1988 + await act(async () => {
1989 ReactTestRenderer.create(
1990 <React.Profiler id="mount-test" onPostCommit={callback}>
1991 <ComponentWithEffects />
@@ -2012,7 +2012,7 @@ describe(`onPostCommit`, () => {
2012 expect(call[3]).toBe(2011); // commit start time (before mutations or effects)
2013 });
2014
2015 - it('should bubble time spent in effects to higher profilers', () => {
2015 + it('should bubble time spent in effects to higher profilers', async () => {
2016 const callback = jest.fn();
2017
2018 const ComponentWithEffects = ({cleanupDuration, duration, setCountRef}) => {
@@ -2033,7 +2033,7 @@ describe(`onPostCommit`, () => {
2033 const setCountRef = React.createRef(null);
2034
2035 let renderer = null;
2036 - act(() => {
2036 + await act(async () => {
2037 renderer = ReactTestRenderer.create(
2038 <React.Profiler id="root-mount" onPostCommit={callback}>
2039 <React.Profiler id="a">
@@ -2060,7 +2060,7 @@ describe(`onPostCommit`, () => {
2060 expect(call[2]).toBe(1010); // durations
2061 expect(call[3]).toBe(2); // commit start time (before mutations or effects)
2062
2063 - act(() => setCountRef.current(count => count + 1));
2063 + await act(async () => setCountRef.current(count => count + 1));
2064
2065 expect(callback).toHaveBeenCalledTimes(2);
2066
@@ -2072,7 +2072,7 @@ describe(`onPostCommit`, () => {
2072 expect(call[2]).toBe(110); // durations
2073 expect(call[3]).toBe(1013); // commit start time (before mutations or effects)
2074
2075 - act(() => {
2075 + await act(async () => {
2076 renderer.update(
2077 <React.Profiler id="root-update" onPostCommit={callback}>
2078 <React.Profiler id="b">
@@ -2093,7 +2093,7 @@ describe(`onPostCommit`, () => {
2093 expect(call[3]).toBe(1124); // commit start time (before mutations or effects)
2094 });
2095
2096 - it('should properly report time in passive effects even when there are errors', () => {
2096 + it('should properly report time in passive effects even when there are errors', async () => {
2097 const callback = jest.fn();
2098
2099 class ErrorBoundary extends React.Component {
@@ -2131,7 +2131,7 @@ describe(`onPostCommit`, () => {
2131
2132 // Test an error that happens during an effect
2133
2134 - act(() => {
2134 + await act(async () => {
2135 ReactTestRenderer.create(
2136 <React.Profiler id="root" onPostCommit={callback}>
2137 <ErrorBoundary
@@ -2179,7 +2179,7 @@ describe(`onPostCommit`, () => {
2179 expect(call[3]).toBe(10110111); // commit start time (before mutations or effects)
2180 });
2181
2182 - it('should properly report time in passive effect cleanup functions even when there are errors', () => {
2182 + it('should properly report time in passive effect cleanup functions even when there are errors', async () => {
2183 const callback = jest.fn();
2184
2185 class ErrorBoundary extends React.Component {
@@ -2218,7 +2218,7 @@ describe(`onPostCommit`, () => {
2218
2219 let renderer = null;
2220
2221 - act(() => {
2221 + await act(async () => {
2222 renderer = ReactTestRenderer.create(
2223 <React.Profiler id="root" onPostCommit={callback}>
2224 <ErrorBoundary
@@ -2260,7 +2260,7 @@ describe(`onPostCommit`, () => {
2260
2261 // Test an error that happens during an cleanup function
2262
2263 - act(() => {
2263 + await act(async () => {
2264 renderer.update(
2265 <React.Profiler id="root" onPostCommit={callback}>
2266 <ErrorBoundary
@@ -2365,7 +2365,7 @@ describe(`onNestedUpdateScheduled`, () => {
2365 expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
2366 });
2367
2368 - it('is called when a function component schedules an update during a layout effect', () => {
2368 + it('is called when a function component schedules an update during a layout effect', async () => {
2369 function Component() {
2370 const [didMount, setDidMount] = React.useState(false);
2371 React.useLayoutEffect(() => {
@@ -2377,7 +2377,7 @@ describe(`onNestedUpdateScheduled`, () => {
2377
2378 const onNestedUpdateScheduled = jest.fn();
2379
2380 - act(() => {
2380 + await act(async () => {
2381 ReactNoop.render(
2382 <React.Profiler
2383 id="test"
@@ -2425,7 +2425,7 @@ describe(`onNestedUpdateScheduled`, () => {
2425 expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('root');
2426 });
2427
2428 - it('bubbles up and calls all ancestor Profilers', () => {
2428 + it('bubbles up and calls all ancestor Profilers', async () => {
2429 function Component() {
2430 const [didMount, setDidMount] = React.useState(false);
2431 React.useLayoutEffect(() => {
@@ -2438,7 +2438,7 @@ describe(`onNestedUpdateScheduled`, () => {
2438 const onNestedUpdateScheduledTwo = jest.fn();
2439 const onNestedUpdateScheduledThree = jest.fn();
2440
2441 - act(() => {
2441 + await act(async () => {
2442 ReactNoop.render(
2443 <React.Profiler
2444 id="one"
@@ -2466,7 +2466,7 @@ describe(`onNestedUpdateScheduled`, () => {
2466 expect(onNestedUpdateScheduledThree).not.toHaveBeenCalled();
2467 });
2468
2469 - it('is not called when an update is scheduled for another doort during a layout effect', () => {
2469 + it('is not called when an update is scheduled for another doort during a layout effect', async () => {
2470 const setStateRef = React.createRef(null);
2471
2472 function ComponentRootOne() {
@@ -2486,7 +2486,7 @@ describe(`onNestedUpdateScheduled`, () => {
2486
2487 const onNestedUpdateScheduled = jest.fn();
2488
2489 - act(() => {
2489 + await act(async () => {
2490 ReactNoop.renderToRootWithID(
2491 <React.Profiler
2492 id="test"
@@ -2514,7 +2514,7 @@ describe(`onNestedUpdateScheduled`, () => {
2514 expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
2515 });
2516
2517 - it('is not called when a function component schedules an update during a passive effect', () => {
2517 + it('is not called when a function component schedules an update during a passive effect', async () => {
2518 function Component() {
2519 const [didMount, setDidMount] = React.useState(false);
2520 React.useEffect(() => {
@@ -2526,7 +2526,7 @@ describe(`onNestedUpdateScheduled`, () => {
2526
2527 const onNestedUpdateScheduled = jest.fn();
2528
2529 - act(() => {
2529 + await act(async () => {
2530 ReactNoop.render(
2531 <React.Profiler
2532 id="test"
@@ -2540,7 +2540,7 @@ describe(`onNestedUpdateScheduled`, () => {
2540 expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
2541 });
2542
2543 - it('is not called when a function component schedules an update outside of render', () => {
2543 + it('is not called when a function component schedules an update outside of render', async () => {
2544 const updateFnRef = React.createRef(null);
2545
2546 function Component() {
@@ -2552,7 +2552,7 @@ describe(`onNestedUpdateScheduled`, () => {
2552
2553 const onNestedUpdateScheduled = jest.fn();
2554
2555 - act(() => {
2555 + await act(async () => {
2556 ReactNoop.render(
2557 <React.Profiler
2558 id="test"
@@ -2563,14 +2563,14 @@ describe(`onNestedUpdateScheduled`, () => {
2563 });
2564 assertLog(['Component:false']);
2565
2566 - act(() => {
2566 + await act(async () => {
2567 updateFnRef.current();
2568 });
2569 assertLog(['Component:true']);
2570 expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
2571 });
2572
2573 - it('it is not called when a component schedules an update during render', () => {
2573 + it('it is not called when a component schedules an update during render', async () => {
2574 function Component() {
2575 const [state, setState] = React.useState(false);
2576 if (state === false) {
@@ -2582,7 +2582,7 @@ describe(`onNestedUpdateScheduled`, () => {
2582
2583 const onNestedUpdateScheduled = jest.fn();
2584
2585 - act(() => {
2585 + await act(async () => {
2586 ReactNoop.render(
2587 <React.Profiler
2588 id="test"
@@ -2596,7 +2596,7 @@ describe(`onNestedUpdateScheduled`, () => {
2596 expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
2597 });
2598
2599 - it('it is called when a component schedules an update from a ref callback', () => {
2599 + it('it is called when a component schedules an update from a ref callback', async () => {
2600 function Component({mountChild}) {
2601 const [refAttached, setRefAttached] = React.useState(false);
2602 const [refDetached, setRefDetached] = React.useState(false);
@@ -2613,7 +2613,7 @@ describe(`onNestedUpdateScheduled`, () => {
2613
2614 const onNestedUpdateScheduled = jest.fn();
2615
2616 - act(() => {
2616 + await act(async () => {
2617 ReactNoop.render(
2618 <React.Profiler
2619 id="test"
@@ -2627,7 +2627,7 @@ describe(`onNestedUpdateScheduled`, () => {
2627 expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
2628 expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
2629
2630 - act(() => {
2630 + await act(async () => {
2631 ReactNoop.render(
2632 <React.Profiler
2633 id="test"
@@ -2642,7 +2642,7 @@ describe(`onNestedUpdateScheduled`, () => {
2642 expect(onNestedUpdateScheduled.mock.calls[1][0]).toBe('test');
2643 });
2644
2645 - it('is called when a class component schedules an update from the componentDidMount lifecycles', () => {
2645 + it('is called when a class component schedules an update from the componentDidMount lifecycles', async () => {
2646 class Component extends React.Component {
2647 state = {
2648 value: false,
@@ -2659,7 +2659,7 @@ describe(`onNestedUpdateScheduled`, () => {
2659
2660 const onNestedUpdateScheduled = jest.fn();
2661
2662 - act(() => {
2662 + await act(async () => {
2663 ReactNoop.render(
2664 <React.Profiler
2665 id="test"
@@ -2674,7 +2674,7 @@ describe(`onNestedUpdateScheduled`, () => {
2674 expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
2675 });
2676
2677 - it('is called when a class component schedules an update from the componentDidUpdate lifecycles', () => {
2677 + it('is called when a class component schedules an update from the componentDidUpdate lifecycles', async () => {
2678 class Component extends React.Component {
2679 state = {
2680 nestedUpdateSheduled: false,
@@ -2699,7 +2699,7 @@ describe(`onNestedUpdateScheduled`, () => {
2699
2700 const onNestedUpdateScheduled = jest.fn();
2701
2702 - act(() => {
2702 + await act(async () => {
2703 ReactNoop.render(
2704 <React.Profiler
2705 id="test"
@@ -2711,7 +2711,7 @@ describe(`onNestedUpdateScheduled`, () => {
2711 assertLog(['Component:false:false']);
2712 expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
2713
2714 - act(() => {
2714 + await act(async () => {
2715 ReactNoop.render(
2716 <React.Profiler
2717 id="test"
@@ -2726,7 +2726,7 @@ describe(`onNestedUpdateScheduled`, () => {
2726 expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
2727 });
2728
2729 - it('is not called when a class component schedules an update outside of render', () => {
2729 + it('is not called when a class component schedules an update outside of render', async () => {
2730 const updateFnRef = React.createRef(null);
2731
2732 class Component extends React.Component {
@@ -2743,7 +2743,7 @@ describe(`onNestedUpdateScheduled`, () => {
2743
2744 const onNestedUpdateScheduled = jest.fn();
2745
2746 - act(() => {
2746 + await act(async () => {
2747 ReactNoop.render(
2748 <React.Profiler
2749 id="test"
@@ -2754,7 +2754,7 @@ describe(`onNestedUpdateScheduled`, () => {
2754 });
2755 assertLog(['Component:false']);
2756
2757 - act(() => {
2757 + await act(async () => {
2758 updateFnRef.current();
2759 });
2760 assertLog(['Component:true']);
packages/react/src/__tests__/ReactStartTransition-test.js
+6 -6
@@ -27,7 +27,7 @@ describe('ReactStartTransition', () => {
27 useTransition = React.useTransition;
28 });
29
30 - it('Warns if a suspicious number of fibers are updated inside startTransition', () => {
30 + it('Warns if a suspicious number of fibers are updated inside startTransition', async () => {
31 const subs = new Set();
32 const useUserSpaceSubscription = () => {
33 const setState = useState(0)[1];
@@ -47,14 +47,14 @@ describe('ReactStartTransition', () => {
47 return null;
48 };
49
50 - act(() => {
50 + await act(async () => {
51 ReactTestRenderer.create(<Component level={0} />, {
52 unstable_isConcurrent: true,
53 });
54 });
55
56 - expect(() => {
57 - act(() => {
56 + await expect(async () => {
57 + await act(async () => {
58 React.startTransition(() => {
59 subs.forEach(setState => {
60 setState(state => state + 1);
@@ -70,8 +70,8 @@ describe('ReactStartTransition', () => {
70 {withoutStack: true},
71 );
72
73 - expect(() => {
74 - act(() => {
73 + await expect(async () => {
74 + await act(async () => {
75 triggerHookTransition(() => {
76 subs.forEach(setState => {
77 setState(state => state + 1);
packages/react/src/__tests__/ReactStrictMode-test.internal.js
+8 -8
@@ -45,8 +45,8 @@ describe('ReactStrictMode', () => {
45 return null;
46 }
47
48 - it('should default to not strict', () => {
49 - act(() => {
48 + it('should default to not strict', async () => {
49 + await act(async () => {
50 const container = document.createElement('div');
51 const root = ReactDOMClient.createRoot(container);
52 root.render(<Component label="A" />);
@@ -60,8 +60,8 @@ describe('ReactStrictMode', () => {
60 });
61
62 if (__DEV__) {
63 - it('should support enabling strict mode via createRoot option', () => {
64 - act(() => {
63 + it('should support enabling strict mode via createRoot option', async () => {
64 + await act(async () => {
65 const container = document.createElement('div');
66 const root = ReactDOMClient.createRoot(container, {
67 unstable_strictMode: true,
@@ -81,8 +81,8 @@ describe('ReactStrictMode', () => {
81 ]);
82 });
83
84 - it('should include legacy + strict effects mode', () => {
85 - act(() => {
84 + it('should include legacy + strict effects mode', async () => {
85 + await act(async () => {
86 const container = document.createElement('div');
87 const root = ReactDOMClient.createRoot(container);
88 root.render(
@@ -104,8 +104,8 @@ describe('ReactStrictMode', () => {
104 ]);
105 });
106
107 - it('should allow level to be increased with nesting', () => {
108 - act(() => {
107 + it('should allow level to be increased with nesting', async () => {
108 + await act(async () => {
109 const container = document.createElement('div');
110 const root = ReactDOMClient.createRoot(container);
111 root.render(
packages/react/src/__tests__/ReactStrictMode-test.js
+8 -8
@@ -356,7 +356,7 @@ describe('ReactStrictMode', () => {
356 const root = ReactDOMClient.createRoot(container);
357
358 // Mount
359 - await act(() => {
359 + await act(async () => {
360 root.render(
361 <React.StrictMode>
362 <Uppercased text="hello" />
@@ -372,7 +372,7 @@ describe('ReactStrictMode', () => {
372 log = [];
373
374 // Update
375 - await act(() => {
375 + await act(async () => {
376 root.render(
377 <React.StrictMode>
378 <Uppercased text="goodbye" />
@@ -407,7 +407,7 @@ describe('ReactStrictMode', () => {
407 const root = ReactDOMClient.createRoot(container);
408
409 // Mount
410 - await act(() => {
410 + await act(async () => {
411 root.render(
412 <React.StrictMode>
413 <Uppercased text="hello" />
@@ -429,7 +429,7 @@ describe('ReactStrictMode', () => {
429 log = [];
430
431 // Update
432 - await act(() => {
432 + await act(async () => {
433 root.render(
434 <React.StrictMode>
435 <Uppercased text="goodbye" />
@@ -463,7 +463,7 @@ describe('ReactStrictMode', () => {
463 const container = document.createElement('div');
464 const root = ReactDOMClient.createRoot(container);
465
466 - await act(() => {
466 + await act(async () => {
467 root.render(
468 <React.StrictMode>
469 <App />
@@ -472,7 +472,7 @@ describe('ReactStrictMode', () => {
472 });
473 expect(container.textContent).toBe('0');
474
475 - await act(() => {
475 + await act(async () => {
476 setCount(() => {
477 log.push('Compute count: 1');
478 return 1;
@@ -501,7 +501,7 @@ describe('ReactStrictMode', () => {
501 const container = document.createElement('div');
502 const root = ReactDOMClient.createRoot(container);
503
504 - await act(() => {
504 + await act(async () => {
505 root.render(
506 <React.StrictMode>
507 <App />
@@ -510,7 +510,7 @@ describe('ReactStrictMode', () => {
510 });
511 expect(container.textContent).toBe('0');
512
513 - await act(() => {
513 + await act(async () => {
514 dispatch(1);
515 });
516 expect(container.textContent).toBe('1');