Skip to content

Commit f946f51

Browse files
committed
Update ReactDOMServerSuspense-test to not use legacy rendering APIs
Updates ReactDOMServerSuspense-test to not use legacy rendering APIs Also removes an experimental only gate that is not necessary
1 parent 952aa74 commit f946f51

File tree

1 file changed

+64
-68
lines changed

1 file changed

+64
-68
lines changed

packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js

Lines changed: 64 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
1313

1414
let React;
15-
let ReactDOM;
1615
let ReactDOMClient;
1716
let ReactDOMServer;
1817
let ReactTestUtils;
@@ -24,7 +23,6 @@ function initModules() {
2423
jest.resetModules();
2524

2625
React = require('react');
27-
ReactDOM = require('react-dom');
2826
ReactDOMClient = require('react-dom/client');
2927
ReactDOMServer = require('react-dom/server');
3028
ReactTestUtils = require('react-dom/test-utils');
@@ -35,13 +33,13 @@ function initModules() {
3533

3634
// Make them available to the helpers.
3735
return {
38-
ReactDOM,
36+
ReactDOMClient,
3937
ReactDOMServer,
4038
ReactTestUtils,
4139
};
4240
}
4341

44-
const {itThrowsWhenRendering, resetModules, serverRender} =
42+
const {resetModules, itThrowsWhenRendering} =
4543
ReactDOMServerIntegrationUtils(initModules);
4644

4745
describe('ReactDOMServerSuspense', () => {
@@ -97,42 +95,42 @@ describe('ReactDOMServerSuspense', () => {
9795
}
9896

9997
it('should render the children when no promise is thrown', async () => {
100-
const c = await serverRender(
101-
<div>
102-
<React.Suspense fallback={<Text text="Fallback" />}>
103-
<Text text="Children" />
104-
</React.Suspense>
105-
</div>,
98+
const container = document.createElement('div');
99+
const html = ReactDOMServer.renderToString(
100+
<React.Suspense fallback={<Text text="Fallback" />}>
101+
<Text text="Children" />
102+
</React.Suspense>,
106103
);
107-
expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
104+
container.innerHTML = html;
105+
expect(getVisibleChildren(container)).toEqual(<div>Children</div>);
108106
});
109107

110108
it('should render the fallback when a promise thrown', async () => {
111-
const c = await serverRender(
112-
<div>
113-
<React.Suspense fallback={<Text text="Fallback" />}>
114-
<AsyncText text="Children" />
115-
</React.Suspense>
116-
</div>,
109+
const container = document.createElement('div');
110+
const html = ReactDOMServer.renderToString(
111+
<React.Suspense fallback={<Text text="Fallback" />}>
112+
<AsyncText text="Children" />
113+
</React.Suspense>,
117114
);
118-
expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
115+
container.innerHTML = html;
116+
expect(getVisibleChildren(container)).toEqual(<div>Fallback</div>);
119117
});
120118

121119
it('should work with nested suspense components', async () => {
122-
const c = await serverRender(
123-
<div>
124-
<React.Suspense fallback={<Text text="Fallback" />}>
125-
<div>
126-
<Text text="Children" />
127-
<React.Suspense fallback={<Text text="Fallback" />}>
128-
<AsyncText text="Children" />
129-
</React.Suspense>
130-
</div>
131-
</React.Suspense>
132-
</div>,
120+
const container = document.createElement('div');
121+
const html = ReactDOMServer.renderToString(
122+
<React.Suspense fallback={<Text text="Fallback" />}>
123+
<div>
124+
<Text text="Children" />
125+
<React.Suspense fallback={<Text text="Fallback" />}>
126+
<AsyncText text="Children" />
127+
</React.Suspense>
128+
</div>
129+
</React.Suspense>,
133130
);
131+
container.innerHTML = html;
134132

135-
expect(getVisibleChildren(c)).toEqual(
133+
expect(getVisibleChildren(container)).toEqual(
136134
<div>
137135
<div>Children</div>
138136
<div>Fallback</div>
@@ -152,56 +150,54 @@ describe('ReactDOMServerSuspense', () => {
152150
</React.Suspense>
153151
</SuspenseList>
154152
);
155-
const element = await serverRender(example);
156-
const parent = element.parentNode;
157-
const divA = parent.children[0];
153+
const container = document.createElement('div');
154+
const html = ReactDOMServer.renderToString(example);
155+
container.innerHTML = html;
156+
157+
const divA = container.children[0];
158158
expect(divA.tagName).toBe('DIV');
159159
expect(divA.textContent).toBe('A');
160-
const divB = parent.children[1];
160+
const divB = container.children[1];
161161
expect(divB.tagName).toBe('DIV');
162162
expect(divB.textContent).toBe('B');
163163

164164
await act(() => {
165-
ReactDOMClient.hydrateRoot(parent, example);
165+
ReactDOMClient.hydrateRoot(container, example);
166166
});
167167

168-
const parent2 = element.parentNode;
169-
const divA2 = parent2.children[0];
170-
const divB2 = parent2.children[1];
168+
const divA2 = container.children[0];
169+
const divB2 = container.children[1];
171170
expect(divA).toBe(divA2);
172171
expect(divB).toBe(divB2);
173172
});
174173

175-
// TODO: Remove this in favor of @gate pragma
176-
if (__EXPERIMENTAL__) {
177-
itThrowsWhenRendering(
178-
'a suspending component outside a Suspense node',
179-
async render => {
180-
await render(
181-
<div>
182-
<React.Suspense />
183-
<AsyncText text="Children" />
184-
<React.Suspense />
185-
</div>,
186-
1,
187-
);
188-
},
189-
'A component suspended while responding to synchronous input.',
190-
);
191-
192-
itThrowsWhenRendering(
193-
'a suspending component without a Suspense above',
194-
async render => {
195-
await render(
196-
<div>
197-
<AsyncText text="Children" />
198-
</div>,
199-
1,
200-
);
201-
},
202-
'A component suspended while responding to synchronous input.',
203-
);
204-
}
174+
itThrowsWhenRendering(
175+
'a suspending component outside a Suspense node',
176+
async render => {
177+
await render(
178+
<div>
179+
<React.Suspense />
180+
<AsyncText text="Children" />
181+
<React.Suspense />
182+
</div>,
183+
1,
184+
);
185+
},
186+
'A component suspended while responding to synchronous input.',
187+
);
188+
189+
itThrowsWhenRendering(
190+
'a suspending component without a Suspense above',
191+
async render => {
192+
await render(
193+
<div>
194+
<AsyncText text="Children" />
195+
</div>,
196+
1,
197+
);
198+
},
199+
'A component suspended while responding to synchronous input.',
200+
);
205201

206202
it('does not get confused by throwing null', () => {
207203
function Bad() {

0 commit comments

Comments
 (0)