Update ReactDOMServerSuspense-test to not use legacy rendering APIs (#28251)
Updates ReactDOMServerSuspense-test to not use legacy rendering APIs Also removes an experimental only gate that is not necessary
Josh Story committed
Feb 5, 2024 at 21:25 UTC
0a53c465743264d3b0544f4579f26c7b4a8053fb
1 file changed
+56
-94
packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+56
-94
@@ -9,44 +9,24 @@
9
10
'use strict';
11
12
-const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
13
-
12
let React;
15
-let ReactDOM;
13
let ReactDOMClient;
14
let ReactDOMServer;
18
-let ReactTestUtils;
15
let act;
16
let SuspenseList;
17
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
-
18
describe('ReactDOMServerSuspense', () => {
19
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
+ }
30
});
31
32
function Text(props) {
@@ -97,42 +77,42 @@ describe('ReactDOMServerSuspense', () => {
77
}
78
79
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>,
85
);
107
- expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
86
+ container.innerHTML = html;
87
+ expect(getVisibleChildren(container)).toEqual(<div>Children</div>);
88
});
89
90
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>,
96
);
118
- expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
97
+ container.innerHTML = html;
98
+ expect(getVisibleChildren(container)).toEqual(<div>Fallback</div>);
99
});
100
101
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>,
112
);
113
+ container.innerHTML = html;
114
135
- expect(getVisibleChildren(c)).toEqual(
115
+ expect(getVisibleChildren(container)).toEqual(
116
<div>
117
<div>Children</div>
118
<div>Fallback</div>
@@ -152,56 +132,38 @@ describe('ReactDOMServerSuspense', () => {
132
</React.Suspense>
133
</SuspenseList>
134
);
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];
140
expect(divA.tagName).toBe('DIV');
141
expect(divA.textContent).toBe('A');
160
- const divB = parent.children[1];
142
+ const divB = container.children[1];
143
expect(divB.tagName).toBe('DIV');
144
expect(divB.textContent).toBe('B');
145
146
await act(() => {
165
- ReactDOMClient.hydrateRoot(parent, example);
147
+ ReactDOMClient.hydrateRoot(container, example);
148
});
149
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];
152
expect(divA).toBe(divA2);
153
expect(divB).toBe(divB2);
154
});
155
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
+ });
167
168
it('does not get confused by throwing null', () => {
169
function Bad() {