Use createRoot in ReactTestUtilsActUnmockedScheduler-test (#28086)
Jack Pope committed
Jan 26, 2024 at 17:17 UTC
38997cf19ac5223a7c748ba975b40d649b9c4c52
1 file changed
+29
-27
packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
+29
-27
@@ -10,10 +10,11 @@
10
// sanity tests to make sure act() works without a mocked scheduler
11
12
let React;
13
-let ReactDOM;
13
+let ReactDOMClient;
14
let act;
15
let container;
16
let yields;
17
+let prevActGlobal;
18
19
function clearLog() {
20
try {
@@ -23,32 +24,26 @@ function clearLog() {
24
}
25
}
26
26
-function render(el, dom) {
27
- ReactDOM.render(el, dom);
28
-}
29
-
30
-function unmount(dom) {
31
- ReactDOM.unmountComponentAtNode(dom);
32
-}
33
-
27
beforeEach(() => {
28
+ prevActGlobal = global.IS_REACT_ACT_ENVIRONMENT;
29
+ global.IS_REACT_ACT_ENVIRONMENT = true;
30
jest.resetModules();
31
jest.unmock('scheduler');
32
yields = [];
33
React = require('react');
39
- ReactDOM = require('react-dom');
34
+ ReactDOMClient = require('react-dom/client');
35
act = React.unstable_act;
36
container = document.createElement('div');
37
document.body.appendChild(container);
38
});
39
40
afterEach(() => {
46
- unmount(container);
41
+ global.IS_REACT_ACT_ENVIRONMENT = prevActGlobal;
42
document.body.removeChild(container);
43
});
44
45
// @gate __DEV__
51
-it('can use act to flush effects', () => {
46
+it('can use act to flush effects', async () => {
47
function App() {
48
React.useEffect(() => {
49
yields.push(100);
@@ -56,15 +51,16 @@ it('can use act to flush effects', () => {
51
return null;
52
}
53
59
- act(() => {
60
- render(<App />, container);
54
+ const root = ReactDOMClient.createRoot(container);
55
+ await act(() => {
56
+ root.render(<App />);
57
});
58
59
expect(clearLog()).toEqual([100]);
60
});
61
62
// @gate __DEV__
67
-it('flushes effects on every call', () => {
63
+it('flushes effects on every call', async () => {
64
function App() {
65
const [ctr, setCtr] = React.useState(0);
66
React.useEffect(() => {
@@ -77,8 +73,9 @@ it('flushes effects on every call', () => {
73
);
74
}
75
80
- act(() => {
81
- render(<App />, container);
76
+ const root = ReactDOMClient.createRoot(container);
77
+ await act(() => {
78
+ root.render(<App />);
79
});
80
81
expect(clearLog()).toEqual([0]);
@@ -103,7 +100,7 @@ it('flushes effects on every call', () => {
100
});
101
102
// @gate __DEV__
106
-it("should keep flushing effects until they're done", () => {
103
+it("should keep flushing effects until they're done", async () => {
104
function App() {
105
const [ctr, setCtr] = React.useState(0);
106
React.useEffect(() => {
@@ -114,25 +111,27 @@ it("should keep flushing effects until they're done", () => {
111
return ctr;
112
}
113
117
- act(() => {
118
- render(<App />, container);
114
+ const root = ReactDOMClient.createRoot(container);
115
+ await act(() => {
116
+ root.render(<App />);
117
});
118
119
expect(container.innerHTML).toEqual('5');
120
});
121
122
// @gate __DEV__
125
-it('should flush effects only on exiting the outermost act', () => {
123
+it('should flush effects only on exiting the outermost act', async () => {
124
function App() {
125
React.useEffect(() => {
126
yields.push(0);
127
});
128
return null;
129
}
130
+ const root = ReactDOMClient.createRoot(container);
131
// let's nest a couple of act() calls
133
- act(() => {
134
- act(() => {
135
- render(<App />, container);
132
+ await act(async () => {
133
+ await act(() => {
134
+ root.render(<App />);
135
});
136
// the effect wouldn't have yielded yet because
137
// we're still inside an act() scope
@@ -150,7 +149,9 @@ it('can handle cascading promises', async () => {
149
const [state, setState] = React.useState(0);
150
async function ticker() {
151
await null;
153
- setState(x => x + 1);
152
+ await act(() => {
153
+ setState(x => x + 1);
154
+ });
155
}
156
React.useEffect(() => {
157
yields.push(state);
@@ -159,8 +160,9 @@ it('can handle cascading promises', async () => {
160
return state;
161
}
162
162
- await act(async () => {
163
- render(<App />, container);
163
+ const root = ReactDOMClient.createRoot(container);
164
+ await act(() => {
165
+ root.render(<App />);
166
});
167
// all 5 ticks present and accounted for
168
expect(clearLog()).toEqual([0, 1, 2, 3, 4]);