diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
index a38d4c0698ced..d7ed05673c67f 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
@@ -10,10 +10,11 @@
// sanity tests to make sure act() works without a mocked scheduler
let React;
-let ReactDOM;
+let ReactDOMClient;
let act;
let container;
let yields;
+let prevActGlobal;
function clearLog() {
try {
@@ -23,32 +24,26 @@ function clearLog() {
}
}
-function render(el, dom) {
- ReactDOM.render(el, dom);
-}
-
-function unmount(dom) {
- ReactDOM.unmountComponentAtNode(dom);
-}
-
beforeEach(() => {
+ prevActGlobal = global.IS_REACT_ACT_ENVIRONMENT;
+ global.IS_REACT_ACT_ENVIRONMENT = true;
jest.resetModules();
jest.unmock('scheduler');
yields = [];
React = require('react');
- ReactDOM = require('react-dom');
+ ReactDOMClient = require('react-dom/client');
act = React.unstable_act;
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
- unmount(container);
+ global.IS_REACT_ACT_ENVIRONMENT = prevActGlobal;
document.body.removeChild(container);
});
// @gate __DEV__
-it('can use act to flush effects', () => {
+it('can use act to flush effects', async () => {
function App() {
React.useEffect(() => {
yields.push(100);
@@ -56,15 +51,16 @@ it('can use act to flush effects', () => {
return null;
}
- act(() => {
- render(, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
});
expect(clearLog()).toEqual([100]);
});
// @gate __DEV__
-it('flushes effects on every call', () => {
+it('flushes effects on every call', async () => {
function App() {
const [ctr, setCtr] = React.useState(0);
React.useEffect(() => {
@@ -77,8 +73,9 @@ it('flushes effects on every call', () => {
);
}
- act(() => {
- render(, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
});
expect(clearLog()).toEqual([0]);
@@ -103,7 +100,7 @@ it('flushes effects on every call', () => {
});
// @gate __DEV__
-it("should keep flushing effects until they're done", () => {
+it("should keep flushing effects until they're done", async () => {
function App() {
const [ctr, setCtr] = React.useState(0);
React.useEffect(() => {
@@ -114,25 +111,27 @@ it("should keep flushing effects until they're done", () => {
return ctr;
}
- act(() => {
- render(, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
});
expect(container.innerHTML).toEqual('5');
});
// @gate __DEV__
-it('should flush effects only on exiting the outermost act', () => {
+it('should flush effects only on exiting the outermost act', async () => {
function App() {
React.useEffect(() => {
yields.push(0);
});
return null;
}
+ const root = ReactDOMClient.createRoot(container);
// let's nest a couple of act() calls
- act(() => {
- act(() => {
- render(, container);
+ await act(async () => {
+ await act(() => {
+ root.render();
});
// the effect wouldn't have yielded yet because
// we're still inside an act() scope
@@ -150,7 +149,9 @@ it('can handle cascading promises', async () => {
const [state, setState] = React.useState(0);
async function ticker() {
await null;
- setState(x => x + 1);
+ await act(() => {
+ setState(x => x + 1);
+ });
}
React.useEffect(() => {
yields.push(state);
@@ -159,8 +160,9 @@ it('can handle cascading promises', async () => {
return state;
}
- await act(async () => {
- render(, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render();
});
// all 5 ticks present and accounted for
expect(clearLog()).toEqual([0, 1, 2, 3, 4]);