Skip to content

Commit

Permalink
Codemod act -> await act (4/?)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
acdlite committed Mar 8, 2023
1 parent 161f6ae commit 8b8eb8e
Show file tree
Hide file tree
Showing 16 changed files with 792 additions and 977 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -984,7 +984,7 @@ describe('ReactHooksInspectionIntegration', () => {
children: ['count: ', '1'],
});

act(incrementCount);
await act(async () => incrementCount());
expect(renderer.toJSON()).toEqual({
type: 'div',
props: {},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,21 +48,16 @@ module.exports = function (initModules) {
// ====================================

// promisified version of ReactDOM.render()
function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
return new Promise(resolve => {
if (forceHydrate) {
act(() => {
ReactDOM.hydrate(reactElement, domElement);
});
} else {
act(() => {
ReactDOM.render(reactElement, domElement);
});
}
// We can't use the callback for resolution because that will not catch
// errors. They're thrown.
resolve();
});
async function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
if (forceHydrate) {
await act(async () => {
ReactDOM.hydrate(reactElement, domElement);
});
} else {
await act(async () => {
ReactDOM.render(reactElement, domElement);
});
}
}
// performs fn asynchronously and expects count errors logged to console.error.
// will fail the test if the count of errors logged is not equal to count.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2520,7 +2520,7 @@ describe('DOMPluginEventSystem', () => {
});

// @gate www
it('beforeblur and afterblur are called after a focused element is suspended', () => {
it('beforeblur and afterblur are called after a focused element is suspended', async () => {
const log = [];
// We have to persist here because we want to read relatedTarget later.
const onAfterBlur = jest.fn(e => {
Expand Down Expand Up @@ -2575,7 +2575,7 @@ describe('DOMPluginEventSystem', () => {

const root = ReactDOMClient.createRoot(container2);

act(() => {
await act(async () => {
root.render(<Component />);
});
jest.runAllTimers();
Expand All @@ -2587,7 +2587,7 @@ describe('DOMPluginEventSystem', () => {
expect(onAfterBlur).toHaveBeenCalledTimes(0);

suspend = true;
act(() => {
await act(async () => {
root.render(<Component />);
});
jest.runAllTimers();
Expand All @@ -2604,7 +2604,7 @@ describe('DOMPluginEventSystem', () => {
});

// @gate www
it('beforeblur should skip handlers from a deleted subtree after the focused element is suspended', () => {
it('beforeblur should skip handlers from a deleted subtree after the focused element is suspended', async () => {
const onBeforeBlur = jest.fn();
const innerRef = React.createRef();
const innerRef2 = React.createRef();
Expand Down Expand Up @@ -2661,7 +2661,7 @@ describe('DOMPluginEventSystem', () => {

const root = ReactDOMClient.createRoot(container2);

act(() => {
await act(async () => {
root.render(<Component />);
});
jest.runAllTimers();
Expand All @@ -2672,7 +2672,7 @@ describe('DOMPluginEventSystem', () => {
expect(onBeforeBlur).toHaveBeenCalledTimes(0);

suspend = true;
act(() => {
await act(async () => {
root.render(<Component />);
});
jest.runAllTimers();
Expand All @@ -2684,17 +2684,17 @@ describe('DOMPluginEventSystem', () => {
});

// @gate www
it('regression: does not fire beforeblur/afterblur if target is already hidden', () => {
it('regression: does not fire beforeblur/afterblur if target is already hidden', async () => {
const Suspense = React.Suspense;
let suspend = false;
const promise = Promise.resolve();
const fakePromise = {then() {}};
const setBeforeBlurHandle =
ReactDOM.unstable_createEventHandle('beforeblur');
const innerRef = React.createRef();

function Child() {
if (suspend) {
throw promise;
throw fakePromise;
}
return <input ref={innerRef} />;
}
Expand Down Expand Up @@ -2726,7 +2726,7 @@ describe('DOMPluginEventSystem', () => {
document.body.appendChild(container2);

const root = ReactDOMClient.createRoot(container2);
act(() => {
await act(async () => {
root.render(<Component />);
});

Expand All @@ -2737,7 +2737,7 @@ describe('DOMPluginEventSystem', () => {

// Suspend. This hides the input node, causing it to lose focus.
suspend = true;
act(() => {
await act(async () => {
root.render(<Component />);
});

Expand Down
Loading

0 comments on commit 8b8eb8e

Please sign in to comment.