12
12
const ReactDOMServerIntegrationUtils = require ( './utils/ReactDOMServerIntegrationTestUtils' ) ;
13
13
14
14
let React ;
15
- let ReactDOM ;
16
15
let ReactDOMClient ;
17
16
let ReactDOMServer ;
18
17
let ReactTestUtils ;
@@ -24,7 +23,6 @@ function initModules() {
24
23
jest . resetModules ( ) ;
25
24
26
25
React = require ( 'react' ) ;
27
- ReactDOM = require ( 'react-dom' ) ;
28
26
ReactDOMClient = require ( 'react-dom/client' ) ;
29
27
ReactDOMServer = require ( 'react-dom/server' ) ;
30
28
ReactTestUtils = require ( 'react-dom/test-utils' ) ;
@@ -35,13 +33,13 @@ function initModules() {
35
33
36
34
// Make them available to the helpers.
37
35
return {
38
- ReactDOM ,
36
+ ReactDOMClient ,
39
37
ReactDOMServer,
40
38
ReactTestUtils,
41
39
} ;
42
40
}
43
41
44
- const { itThrowsWhenRendering , resetModules, serverRender } =
42
+ const { resetModules, itThrowsWhenRendering } =
45
43
ReactDOMServerIntegrationUtils ( initModules ) ;
46
44
47
45
describe ( 'ReactDOMServerSuspense' , ( ) => {
@@ -97,42 +95,42 @@ describe('ReactDOMServerSuspense', () => {
97
95
}
98
96
99
97
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 > ,
106
103
) ;
107
- expect ( getVisibleChildren ( c ) ) . toEqual ( < div > Children</ div > ) ;
104
+ container . innerHTML = html ;
105
+ expect ( getVisibleChildren ( container ) ) . toEqual ( < div > Children</ div > ) ;
108
106
} ) ;
109
107
110
108
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 > ,
117
114
) ;
118
- expect ( getVisibleChildren ( c ) ) . toEqual ( < div > Fallback</ div > ) ;
115
+ container . innerHTML = html ;
116
+ expect ( getVisibleChildren ( container ) ) . toEqual ( < div > Fallback</ div > ) ;
119
117
} ) ;
120
118
121
119
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 > ,
133
130
) ;
131
+ container . innerHTML = html ;
134
132
135
- expect ( getVisibleChildren ( c ) ) . toEqual (
133
+ expect ( getVisibleChildren ( container ) ) . toEqual (
136
134
< div >
137
135
< div > Children</ div >
138
136
< div > Fallback</ div >
@@ -152,56 +150,54 @@ describe('ReactDOMServerSuspense', () => {
152
150
</ React . Suspense >
153
151
</ SuspenseList >
154
152
) ;
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 ] ;
158
158
expect ( divA . tagName ) . toBe ( 'DIV' ) ;
159
159
expect ( divA . textContent ) . toBe ( 'A' ) ;
160
- const divB = parent . children [ 1 ] ;
160
+ const divB = container . children [ 1 ] ;
161
161
expect ( divB . tagName ) . toBe ( 'DIV' ) ;
162
162
expect ( divB . textContent ) . toBe ( 'B' ) ;
163
163
164
164
await act ( ( ) => {
165
- ReactDOMClient . hydrateRoot ( parent , example ) ;
165
+ ReactDOMClient . hydrateRoot ( container , example ) ;
166
166
} ) ;
167
167
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 ] ;
171
170
expect ( divA ) . toBe ( divA2 ) ;
172
171
expect ( divB ) . toBe ( divB2 ) ;
173
172
} ) ;
174
173
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
+ ) ;
205
201
206
202
it ( 'does not get confused by throwing null' , ( ) => {
207
203
function Bad ( ) {
0 commit comments