Skip to content

Commit 2dc428f

Browse files
eps1loneps1lon
authored
Convert ReactScope to createRoot (#28172)
1 parent 44952dc commit 2dc428f

File tree

1 file changed

+74
-24
lines changed

1 file changed

+74
-24
lines changed

‎packages/react-reconciler/src/__tests__/ReactScope-test.internal.js‎

Lines changed: 74 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,10 @@ describe('ReactScope', () => {
2626
});
2727

2828
describe('ReactDOM', () => {
29-
let ReactDOM;
3029
let ReactDOMClient;
3130
let container;
3231

3332
beforeEach(() => {
34-
ReactDOM = require('react-dom');
3533
ReactDOMClient = require('react-dom/client');
3634
ReactDOMServer = require('react-dom/server');
3735
container = document.createElement('div');
@@ -44,7 +42,7 @@ describe('ReactScope', () => {
4442
});
4543

4644
// @gate www
47-
it('DO_NOT_USE_queryAllNodes() works as intended', () => {
45+
it('DO_NOT_USE_queryAllNodes() works as intended', async () => {
4846
const testScopeQuery = (type, props) => true;
4947
const TestScope = React.unstable_Scope;
5048
const scopeRef = React.createRef();
@@ -68,18 +66,28 @@ describe('ReactScope', () => {
6866
);
6967
}
7068

71-
ReactDOM.render(<Test toggle={true} />, container);
69+
const root = ReactDOMClient.createRoot(container);
70+
await act(() => {
71+
root.render(<Test toggle={true} />);
72+
});
73+
7274
let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
7375
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+
7580
nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
7681
expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
77-
ReactDOM.render(null, container);
82+
await act(() => {
83+
root.render(null);
84+
});
85+
7886
expect(scopeRef.current).toBe(null);
7987
});
8088

8189
// @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 () => {
8391
const testScopeQuery = (type, props) => type === 'div';
8492
const TestScope = React.unstable_Scope;
8593
const scopeRef = React.createRef();
@@ -103,7 +111,11 @@ describe('ReactScope', () => {
103111
);
104112
}
105113

106-
ReactDOM.render(<Test toggle={true} />, container);
114+
const root = ReactDOMClient.createRoot(container);
115+
await act(() => {
116+
root.render(<Test toggle={true} />);
117+
});
118+
107119
let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
108120
expect(nodes).toEqual([divRef.current]);
109121
let filterQuery = (type, props, instance) =>
@@ -115,18 +127,24 @@ describe('ReactScope', () => {
115127
testScopeQuery(type, props);
116128
nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery);
117129
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+
119134
filterQuery = (type, props, instance) =>
120135
[spanRef.current, aRef.current].includes(instance) ||
121136
testScopeQuery(type, props);
122137
nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(filterQuery);
123138
expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
124-
ReactDOM.render(null, container);
139+
await act(() => {
140+
root.render(null);
141+
});
142+
125143
expect(scopeRef.current).toBe(null);
126144
});
127145

128146
// @gate www
129-
it('DO_NOT_USE_queryFirstNode() works as intended', () => {
147+
it('DO_NOT_USE_queryFirstNode() works as intended', async () => {
130148
const testScopeQuery = (type, props) => true;
131149
const TestScope = React.unstable_Scope;
132150
const scopeRef = React.createRef();
@@ -150,18 +168,28 @@ describe('ReactScope', () => {
150168
);
151169
}
152170

153-
ReactDOM.render(<Test toggle={true} />, container);
171+
const root = ReactDOMClient.createRoot(container);
172+
await act(() => {
173+
root.render(<Test toggle={true} />);
174+
});
175+
154176
let node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
155177
expect(node).toEqual(divRef.current);
156-
ReactDOM.render(<Test toggle={false} />, container);
178+
await act(() => {
179+
root.render(<Test toggle={false} />);
180+
});
181+
157182
node = scopeRef.current.DO_NOT_USE_queryFirstNode(testScopeQuery);
158183
expect(node).toEqual(aRef.current);
159-
ReactDOM.render(null, container);
184+
await act(() => {
185+
root.render(null);
186+
});
187+
160188
expect(scopeRef.current).toBe(null);
161189
});
162190

163191
// @gate www
164-
it('containsNode() works as intended', () => {
192+
it('containsNode() works as intended', async () => {
165193
const TestScope = React.unstable_Scope;
166194
const scopeRef = React.createRef();
167195
const divRef = React.createRef();
@@ -194,24 +222,34 @@ describe('ReactScope', () => {
194222
);
195223
}
196224

197-
ReactDOM.render(<Test toggle={true} />, container);
225+
const root = ReactDOMClient.createRoot(container);
226+
await act(() => {
227+
root.render(<Test toggle={true} />);
228+
});
229+
198230
expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
199231
expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
200232
expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
201233
expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
202234
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+
204239
expect(scopeRef.current.containsNode(divRef.current)).toBe(true);
205240
expect(scopeRef.current.containsNode(spanRef.current)).toBe(true);
206241
expect(scopeRef.current.containsNode(aRef.current)).toBe(true);
207242
expect(scopeRef.current.containsNode(outerSpan.current)).toBe(false);
208243
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+
210248
expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
211249
});
212250

213251
// @gate www
214-
it('scopes support server-side rendering and hydration', () => {
252+
it('scopes support server-side rendering and hydration', async () => {
215253
const TestScope = React.unstable_Scope;
216254
const scopeRef = React.createRef();
217255
const divRef = React.createRef();
@@ -235,14 +273,16 @@ describe('ReactScope', () => {
235273
'<div><div>DIV</div><span>SPAN</span><a>A</a><div>Outside content!</div></div>',
236274
);
237275
container.innerHTML = html;
238-
ReactDOM.hydrate(<Test />, container);
276+
await act(() => {
277+
ReactDOMClient.hydrateRoot(container, <Test />);
278+
});
239279
const testScopeQuery = (type, props) => true;
240280
const nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);
241281
expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
242282
});
243283

244284
// @gate www
245-
it('getChildContextValues() works as intended', () => {
285+
it('getChildContextValues() works as intended', async () => {
246286
const TestContext = React.createContext();
247287
const TestScope = React.unstable_Scope;
248288
const scopeRef = React.createRef();
@@ -260,13 +300,23 @@ describe('ReactScope', () => {
260300
);
261301
}
262302

263-
ReactDOM.render(<Test toggle={true} />, container);
303+
const root = ReactDOMClient.createRoot(container);
304+
await act(() => {
305+
root.render(<Test toggle={true} />);
306+
});
307+
264308
let nodes = scopeRef.current.getChildContextValues(TestContext);
265309
expect(nodes).toEqual([1]);
266-
ReactDOM.render(<Test toggle={false} />, container);
310+
await act(() => {
311+
root.render(<Test toggle={false} />);
312+
});
313+
267314
nodes = scopeRef.current.getChildContextValues(TestContext);
268315
expect(nodes).toEqual([1, 2]);
269-
ReactDOM.render(null, container);
316+
await act(() => {
317+
root.render(null);
318+
});
319+
270320
expect(scopeRef.current).toBe(null);
271321
});
272322

0 commit comments

Comments
 (0)