Convert ReactDOMSuspensePlaceholder to createRoot (#28168)
Sebastian Silbermann committed
Feb 4, 2024 at 11:02 UTC
c7bf1c25ce0c869c3d30709fa15e6ba9a85a021c
1 file changed
+22
-9
packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
+22
-9
@@ -11,6 +11,7 @@
11
12
let React;
13
let ReactDOM;
14
+let ReactDOMClient;
15
let Suspense;
16
let Scheduler;
17
let act;
@@ -23,6 +24,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
24
jest.resetModules();
25
React = require('react');
26
ReactDOM = require('react-dom');
27
+ ReactDOMClient = require('react-dom/client');
28
Scheduler = require('scheduler');
29
act = require('internal-test-utils').act;
30
Suspense = React.Suspense;
@@ -98,7 +100,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
100
return text;
101
}
102
101
- it('hides and unhides timed out DOM elements', async () => {
103
+ it('hides and unhides timed out DOM elements in legacy roots', async () => {
104
const divs = [
105
React.createRef(null),
106
React.createRef(null),
@@ -144,18 +146,22 @@ describe('ReactDOMSuspensePlaceholder', () => {
146
</Suspense>
147
);
148
}
147
- ReactDOM.render(<App />, container);
149
+ const root = ReactDOMClient.createRoot(container);
150
+ await act(() => {
151
+ root.render(<App />);
152
+ });
153
+
154
expect(container.textContent).toEqual('Loading...');
155
150
- await act(async () => {
151
- await resolveText('B');
156
+ await act(() => {
157
+ resolveText('B');
158
});
159
160
expect(container.textContent).toEqual('ABC');
161
});
162
163
it(
158
- 'outside concurrent mode, re-hides children if their display is updated ' +
164
+ 'in legacy roots, re-hides children if their display is updated ' +
165
'but the boundary is still showing the fallback',
166
async () => {
167
const {useState} = React;
@@ -207,7 +213,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
213
);
214
215
// Regression test for https://github.com/facebook/react/issues/14188
210
- it('can call findDOMNode() in a suspended component commit phase', async () => {
216
+ it('can call findDOMNode() in a suspended component commit phase in legacy roots', async () => {
217
const log = [];
218
const Lazy = React.lazy(
219
() =>
@@ -267,7 +273,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
273
});
274
275
// Regression test for https://github.com/facebook/react/issues/14188
270
- it('can call findDOMNode() in a suspended component commit phase (#2)', () => {
276
+ it('can call legacy findDOMNode() in a suspended component commit phase (#2)', async () => {
277
let suspendOnce = Promise.resolve();
278
function Suspend() {
279
if (suspendOnce) {
@@ -304,9 +310,16 @@ describe('ReactDOMSuspensePlaceholder', () => {
310
);
311
}
312
307
- ReactDOM.render(<App />, container);
313
+ const root = ReactDOMClient.createRoot(container);
314
+ await act(() => {
315
+ root.render(<App />);
316
+ });
317
+
318
expect(log).toEqual(['cDM']);
309
- ReactDOM.render(<App />, container);
319
+ await act(() => {
320
+ root.render(<App />);
321
+ });
322
+
323
expect(log).toEqual(['cDM', 'cDU']);
324
});
325
});