Skip to content

Commit be76c13

Browse files
committed
Update ReactDOMServerSuspense-test to not use legacy rendering APIs
Updates ReactDOMServerSuspense-test to not use legacy rendering APIs. Previously this test was relying on suspending in the legacy renderer to throw during server rendering as well as during client rendering. With the advent of concurrent roots on the client however this doesn't make sense and it only makes sense on the server when using legacy apis like renderToString. I have removed the use of ReactDOMServerIntegrationTestUtils in this test suite and limited the tests to server tests using renderToString to keep as much parity with what was being tested before while dropping anything that no longer makes sense to assert on concurrent client roots
1 parent 952aa74 commit be76c13

File tree

1 file changed

+56
-94
lines changed

1 file changed

+56
-94
lines changed

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

Lines changed: 56 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -9,44 +9,24 @@
99

1010
'use strict';
1111

12-
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
13-
1412
let React;
15-
let ReactDOM;
1613
let ReactDOMClient;
1714
let ReactDOMServer;
18-
let ReactTestUtils;
1915
let act;
2016
let SuspenseList;
2117

22-
function initModules() {
23-
// Reset warning cache.
24-
jest.resetModules();
25-
26-
React = require('react');
27-
ReactDOM = require('react-dom');
28-
ReactDOMClient = require('react-dom/client');
29-
ReactDOMServer = require('react-dom/server');
30-
ReactTestUtils = require('react-dom/test-utils');
31-
act = require('internal-test-utils').act;
32-
if (gate(flags => flags.enableSuspenseList)) {
33-
SuspenseList = React.unstable_SuspenseList;
34-
}
35-
36-
// Make them available to the helpers.
37-
return {
38-
ReactDOM,
39-
ReactDOMServer,
40-
ReactTestUtils,
41-
};
42-
}
43-
44-
const {itThrowsWhenRendering, resetModules, serverRender} =
45-
ReactDOMServerIntegrationUtils(initModules);
46-
4718
describe('ReactDOMServerSuspense', () => {
4819
beforeEach(() => {
49-
resetModules();
20+
// Reset warning cache.
21+
jest.resetModules();
22+
23+
React = require('react');
24+
ReactDOMClient = require('react-dom/client');
25+
ReactDOMServer = require('react-dom/server');
26+
act = require('internal-test-utils').act;
27+
if (gate(flags => flags.enableSuspenseList)) {
28+
SuspenseList = React.unstable_SuspenseList;
29+
}
5030
});
5131

5232
function Text(props) {
@@ -97,42 +77,42 @@ describe('ReactDOMServerSuspense', () => {
9777
}
9878

9979
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>,
80+
const container = document.createElement('div');
81+
const html = ReactDOMServer.renderToString(
82+
<React.Suspense fallback={<Text text="Fallback" />}>
83+
<Text text="Children" />
84+
</React.Suspense>,
10685
);
107-
expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
86+
container.innerHTML = html;
87+
expect(getVisibleChildren(container)).toEqual(<div>Children</div>);
10888
});
10989

11090
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>,
91+
const container = document.createElement('div');
92+
const html = ReactDOMServer.renderToString(
93+
<React.Suspense fallback={<Text text="Fallback" />}>
94+
<AsyncText text="Children" />
95+
</React.Suspense>,
11796
);
118-
expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
97+
container.innerHTML = html;
98+
expect(getVisibleChildren(container)).toEqual(<div>Fallback</div>);
11999
});
120100

121101
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>,
102+
const container = document.createElement('div');
103+
const html = ReactDOMServer.renderToString(
104+
<React.Suspense fallback={<Text text="Fallback" />}>
105+
<div>
106+
<Text text="Children" />
107+
<React.Suspense fallback={<Text text="Fallback" />}>
108+
<AsyncText text="Children" />
109+
</React.Suspense>
110+
</div>
111+
</React.Suspense>,
133112
);
113+
container.innerHTML = html;
134114

135-
expect(getVisibleChildren(c)).toEqual(
115+
expect(getVisibleChildren(container)).toEqual(
136116
<div>
137117
<div>Children</div>
138118
<div>Fallback</div>
@@ -152,56 +132,38 @@ describe('ReactDOMServerSuspense', () => {
152132
</React.Suspense>
153133
</SuspenseList>
154134
);
155-
const element = await serverRender(example);
156-
const parent = element.parentNode;
157-
const divA = parent.children[0];
135+
const container = document.createElement('div');
136+
const html = ReactDOMServer.renderToString(example);
137+
container.innerHTML = html;
138+
139+
const divA = container.children[0];
158140
expect(divA.tagName).toBe('DIV');
159141
expect(divA.textContent).toBe('A');
160-
const divB = parent.children[1];
142+
const divB = container.children[1];
161143
expect(divB.tagName).toBe('DIV');
162144
expect(divB.textContent).toBe('B');
163145

164146
await act(() => {
165-
ReactDOMClient.hydrateRoot(parent, example);
147+
ReactDOMClient.hydrateRoot(container, example);
166148
});
167149

168-
const parent2 = element.parentNode;
169-
const divA2 = parent2.children[0];
170-
const divB2 = parent2.children[1];
150+
const divA2 = container.children[0];
151+
const divB2 = container.children[1];
171152
expect(divA).toBe(divA2);
172153
expect(divB).toBe(divB2);
173154
});
174155

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-
}
156+
it('it throws when rendering a suspending component outside a Suspense node', async () => {
157+
expect(() => {
158+
ReactDOMServer.renderToString(
159+
<div>
160+
<React.Suspense />
161+
<AsyncText text="Children" />
162+
<React.Suspense />
163+
</div>,
164+
);
165+
}).toThrow('A component suspended while responding to synchronous input.');
166+
});
205167

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

0 commit comments

Comments
 (0)