Skip to content

Commit 703c675

Browse files
authored
Codemod act -> await act (1/?) (#26334)
Similar to the rationale for `waitFor` (see #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.
1 parent b380c24 commit 703c675

12 files changed

+202
-212
lines changed

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('ReactHooksInspectionIntegration', () => {
2626
ReactDebugTools = require('react-debug-tools');
2727
});
2828

29-
it('should inspect the current state of useState hooks', () => {
29+
it('should inspect the current state of useState hooks', async () => {
3030
const useState = React.useState;
3131
function Foo(props) {
3232
const [state1, setState1] = useState('hello');
@@ -61,7 +61,7 @@ describe('ReactHooksInspectionIntegration', () => {
6161
const {onMouseDown: setStateA, onMouseUp: setStateB} =
6262
renderer.root.findByType('div').props;
6363

64-
act(() => setStateA('Hi'));
64+
await act(async () => setStateA('Hi'));
6565

6666
childFiber = renderer.root.findByType(Foo)._currentFiber();
6767
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -83,7 +83,7 @@ describe('ReactHooksInspectionIntegration', () => {
8383
},
8484
]);
8585

86-
act(() => setStateB('world!'));
86+
await act(async () => setStateB('world!'));
8787

8888
childFiber = renderer.root.findByType(Foo)._currentFiber();
8989
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -106,7 +106,7 @@ describe('ReactHooksInspectionIntegration', () => {
106106
]);
107107
});
108108

109-
it('should inspect the current state of all stateful hooks', () => {
109+
it('should inspect the current state of all stateful hooks', async () => {
110110
const outsideRef = React.createRef();
111111
function effect() {}
112112
function Foo(props) {
@@ -129,12 +129,8 @@ describe('ReactHooksInspectionIntegration', () => {
129129
React.useMemo(() => state1 + state2, [state1]);
130130

131131
function update() {
132-
act(() => {
133-
setState('A');
134-
});
135-
act(() => {
136-
dispatch({value: 'B'});
137-
});
132+
setState('A');
133+
dispatch({value: 'B'});
138134
ref.current = 'C';
139135
}
140136
const memoizedUpdate = React.useCallback(update, []);
@@ -145,7 +141,7 @@ describe('ReactHooksInspectionIntegration', () => {
145141
);
146142
}
147143
let renderer;
148-
act(() => {
144+
await act(async () => {
149145
renderer = ReactTestRenderer.create(<Foo prop="prop" />);
150146
});
151147

@@ -207,7 +203,9 @@ describe('ReactHooksInspectionIntegration', () => {
207203
},
208204
]);
209205

210-
updateStates();
206+
await act(async () => {
207+
updateStates();
208+
});
211209

212210
childFiber = renderer.root.findByType(Foo)._currentFiber();
213211
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -266,7 +264,7 @@ describe('ReactHooksInspectionIntegration', () => {
266264
]);
267265
});
268266

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 () => {
270268
const useInsertionEffect = React.useInsertionEffect;
271269
const outsideRef = React.createRef();
272270
function effect() {}
@@ -290,13 +288,9 @@ describe('ReactHooksInspectionIntegration', () => {
290288

291289
React.useMemo(() => state1 + state2, [state1]);
292290

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'});
300294
ref.current = 'C';
301295
}
302296
const memoizedUpdate = React.useCallback(update, []);
@@ -307,7 +301,7 @@ describe('ReactHooksInspectionIntegration', () => {
307301
);
308302
}
309303
let renderer;
310-
act(() => {
304+
await act(async () => {
311305
renderer = ReactTestRenderer.create(<Foo prop="prop" />);
312306
});
313307

@@ -376,7 +370,9 @@ describe('ReactHooksInspectionIntegration', () => {
376370
},
377371
]);
378372

379-
updateStates();
373+
await act(async () => {
374+
updateStates();
375+
});
380376

381377
childFiber = renderer.root.findByType(Foo)._currentFiber();
382378
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
@@ -967,7 +963,7 @@ describe('ReactHooksInspectionIntegration', () => {
967963

968964
// This test case is based on an open source bug report:
969965
// 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 () => {
971967
const MyContext = React.createContext(1);
972968

973969
let incrementCount;

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy