Convert ReactScope to createRoot (#28172)
Sebastian Silbermann committed
Feb 2, 2024 at 00:51 UTC
2dc428f746c080bb5bfe478556a051e75eac6e05
1 file changed
+74
-24
packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
+74
-24
@@ -26,12 +26,10 @@ describe('ReactScope', () => {
26
});
27
28
describe('ReactDOM', () => {
29
- let ReactDOM;
29
let ReactDOMClient;
30
let container;
31
32
beforeEach(() => {
34
- ReactDOM = require('react-dom');
33
ReactDOMClient = require('react-dom/client');
34
ReactDOMServer = require('react-dom/server');
35
container = document.createElement('div');
@@ -44,7 +42,7 @@ describe('ReactScope', () => {
42
});
43
44
// @gate www
47
- it('DO_NOT_USE_queryAllNodes() works as intended', () => {
45
+ it('DO_NOT_USE_queryAllNodes() works as intended', async () => {
46
const testScopeQuery = (type, props) => true;
47
const TestScope = React.unstable_Scope;
48
const scopeRef = React.createRef();
@@ -68,18 +66,28 @@ describe('ReactScope', () => {
66
);
67
}
68
71
- ReactDOM.render(<Test toggle={true} />, container);
69
+ const root = ReactDOMClient.createRoot(container);
70
+ await act(() => {
71
+ root.render(<Test toggle={true} />);
72
+ });
73
+
74
let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
75
expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
74
- ReactDOM.render(<Test toggle={false} />, container);
76
+ await act(() => {
77
+ root.render(<Test toggle={false} />);
78
+ });
79
+
80
nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
81
expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
77
- ReactDOM.render(null, container);
82
+ await act(() => {
83
+ root.render(null);
84
+ });
85
+
86
expect(scopeRef.current).toBe(null);
87
});
88
89
// @gate www
82
- it('DO_NOT_USE_queryAllNodes() provides the correct host instance', () => {
90
+ it('DO_NOT_USE_queryAllNodes() provides the correct host instance', async () => {
91
const testScopeQuery = (type, props) => type === 'div';
92
const TestScope = React.unstable_Scope;
93
const scopeRef = React.createRef();
@@ -103,7 +111,11 @@ describe('ReactScope', () => {
111
);
112
}
113
106
- ReactDOM.render(<Test toggle={true} />, container);
114
+ const root = ReactDOMClient.createRoot(container);
115
+ await act(() => {
116
+ root.render(<Test toggle={true} />);
117
+ });
118
+
119
let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
120
expect(nodes).toEqual([divRef.current]);
121
let filterQuery = (type, props, instance) =>
@@ -115,18 +127,24 @@ describe('ReactScope', () => {
127
testScopeQuery(type, props);
128
nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery);
129
expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
118
- ReactDOM.render(<Test toggle={false} />, container);
130
+ await act(() => {
131
+ root.render(<Test toggle={false} />);
132
+ });
133
+
134
filterQuery = (type, props, instance) =>
135
[spanRef.current, aRef.current].includes(instance) ||
136
testScopeQuery(type, props);
137
nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery);
138
expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
124
- ReactDOM.render(null, container);
139
+ await act(() => {
140
+ root.render(null);
141
+ });
142
+
143
expect(scopeRef.current).toBe(null);
144
});
145
146
// @gate www
129
- it('DO_NOT_USE_queryFirstNode() works as intended', () => {
147
+ it('DO_NOT_USE_queryFirstNode() works as intended', async () => {
148
const testScopeQuery = (type, props) => true;
149
const TestScope = React.unstable_Scope;
150
const scopeRef = React.createRef();
@@ -150,18 +168,28 @@ describe('ReactScope', () => {
168
);
169
}
170
153
- ReactDOM.render(<Test toggle={true} />, container);
171
+ const root = ReactDOMClient.createRoot(container);
172
+ await act(() => {
173
+ root.render(<Test toggle={true} />);
174
+ });
175
+
176
let node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
177
expect(node).toEqual(divRef.current);
156
- ReactDOM.render(<Test toggle={false} />, container);
178
+ await act(() => {
179
+ root.render(<Test toggle={false} />);
180
+ });
181
+
182
node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
183
expect(node).toEqual(aRef.current);
159
- ReactDOM.render(null, container);
184
+ await act(() => {
185
+ root.render(null);
186
+ });
187
+
188
expect(scopeRef.current).toBe(null);
189
});
190
191
// @gate www
164
- it('containsNode() works as intended', () => {
192
+ it('containsNode() works as intended', async () => {
193
const TestScope = React.unstable_Scope;
194
const scopeRef = React.createRef();
195
const divRef = React.createRef();
@@ -194,24 +222,34 @@ describe('ReactScope', () => {
222
);
223
}
224
197
- ReactDOM.render(<Test toggle={true} />, container);
225
+ const root = ReactDOMClient.createRoot(container);
226
+ await act(() => {
227
+ root.render(<Test toggle={true} />);
228
+ });
229
+
230
expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
231
expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
232
expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
233
expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
234
expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
203
- ReactDOM.render(<Test toggle={false} />, container);
235
+ await act(() => {
236
+ root.render(<Test toggle={false} />);
237
+ });
238
+
239
expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
240
expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
241
expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
242
expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
243
expect(scopeRef.current.containsNode(emRef.current)).toBe(true);
209
- ReactDOM.render(<Test toggle={true} />, container);
244
+ await act(() => {
245
+ root.render(<Test toggle={true} />);
246
+ });
247
+
248
expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
249
});
250
251
// @gate www
214
- it('scopes support server-side rendering and hydration', () => {
252
+ it('scopes support server-side rendering and hydration', async () => {
253
const TestScope = React.unstable_Scope;
254
const scopeRef = React.createRef();
255
const divRef = React.createRef();
@@ -235,14 +273,16 @@ describe('ReactScope', () => {
273
'<div><div>DIV</div><span>SPAN</span><a>A</a><div>Outside content!</div></div>',
274
);
275
container.innerHTML = html;
238
- ReactDOM.hydrate(<Test />, container);
276
+ await act(() => {
277
+ ReactDOMClient.hydrateRoot(container, <Test />);
278
+ });
279
const testScopeQuery = (type, props) => true;
280
const nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
281
expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
282
});
283
284
// @gate www
245
- it('getChildContextValues() works as intended', () => {
285
+ it('getChildContextValues() works as intended', async () => {
286
const TestContext = React.createContext();
287
const TestScope = React.unstable_Scope;
288
const scopeRef = React.createRef();
@@ -260,13 +300,23 @@ describe('ReactScope', () => {
300
);
301
}
302
263
- ReactDOM.render(<Test toggle={true} />, container);
303
+ const root = ReactDOMClient.createRoot(container);
304
+ await act(() => {
305
+ root.render(<Test toggle={true} />);
306
+ });
307
+
308
let nodes = scopeRef.current.getChildContextValues(TestContext);
309
expect(nodes).toEqual([1]);
266
- ReactDOM.render(<Test toggle={false} />, container);
310
+ await act(() => {
311
+ root.render(<Test toggle={false} />);
312
+ });
313
+
314
nodes = scopeRef.current.getChildContextValues(TestContext);
315
expect(nodes).toEqual([1, 2]);
269
- ReactDOM.render(null, container);
316
+ await act(() => {
317
+ root.render(null);
318
+ });
319
+
320
expect(scopeRef.current).toBe(null);
321
});
322