Skip to content

Commit 703c675

Browse files
authoredMar 7, 2023
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

+19-23
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)