@@ -41,7 +41,7 @@ function initModules() {
41
41
} ;
42
42
}
43
43
44
- const { itThrowsWhenRendering , resetModules, serverRender } =
44
+ const { resetModules, itThrowsWhenRendering } =
45
45
ReactDOMServerIntegrationUtils ( initModules ) ;
46
46
47
47
describe ( 'ReactDOMServerSuspense' , ( ) => {
@@ -97,42 +97,42 @@ describe('ReactDOMServerSuspense', () => {
97
97
}
98
98
99
99
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 > ,
100
+ const container = document . createElement ( 'div' ) ;
101
+ const html = ReactDOMServer . renderToString (
102
+ < React . Suspense fallback = { < Text text = "Fallback" /> } >
103
+ < Text text = "Children" />
104
+ </ React . Suspense > ,
106
105
) ;
107
- expect ( getVisibleChildren ( c ) ) . toEqual ( < div > Children</ div > ) ;
106
+ container . innerHTML = html ;
107
+ expect ( getVisibleChildren ( container ) ) . toEqual ( < div > Children</ div > ) ;
108
108
} ) ;
109
109
110
110
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 > ,
111
+ const container = document . createElement ( 'div' ) ;
112
+ const html = ReactDOMServer . renderToString (
113
+ < React . Suspense fallback = { < Text text = "Fallback" /> } >
114
+ < AsyncText text = "Children" />
115
+ </ React . Suspense > ,
117
116
) ;
118
- expect ( getVisibleChildren ( c ) ) . toEqual ( < div > Fallback</ div > ) ;
117
+ container . innerHTML = html ;
118
+ expect ( getVisibleChildren ( container ) ) . toEqual ( < div > Fallback</ div > ) ;
119
119
} ) ;
120
120
121
121
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 > ,
122
+ const container = document . createElement ( 'div' ) ;
123
+ const html = ReactDOMServer . renderToString (
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 > ,
133
132
) ;
133
+ container . innerHTML = html ;
134
134
135
- expect ( getVisibleChildren ( c ) ) . toEqual (
135
+ expect ( getVisibleChildren ( container ) ) . toEqual (
136
136
< div >
137
137
< div > Children</ div >
138
138
< div > Fallback</ div >
@@ -152,56 +152,54 @@ describe('ReactDOMServerSuspense', () => {
152
152
</ React . Suspense >
153
153
</ SuspenseList >
154
154
) ;
155
- const element = await serverRender ( example ) ;
156
- const parent = element . parentNode ;
157
- const divA = parent . children [ 0 ] ;
155
+ const container = document . createElement ( 'div' ) ;
156
+ const html = ReactDOMServer . renderToString ( example ) ;
157
+ container . innerHTML = html ;
158
+
159
+ const divA = container . children [ 0 ] ;
158
160
expect ( divA . tagName ) . toBe ( 'DIV' ) ;
159
161
expect ( divA . textContent ) . toBe ( 'A' ) ;
160
- const divB = parent . children [ 1 ] ;
162
+ const divB = container . children [ 1 ] ;
161
163
expect ( divB . tagName ) . toBe ( 'DIV' ) ;
162
164
expect ( divB . textContent ) . toBe ( 'B' ) ;
163
165
164
166
await act ( ( ) => {
165
- ReactDOMClient . hydrateRoot ( parent , example ) ;
167
+ ReactDOMClient . hydrateRoot ( container , example ) ;
166
168
} ) ;
167
169
168
- const parent2 = element . parentNode ;
169
- const divA2 = parent2 . children [ 0 ] ;
170
- const divB2 = parent2 . children [ 1 ] ;
170
+ const divA2 = container . children [ 0 ] ;
171
+ const divB2 = container . children [ 1 ] ;
171
172
expect ( divA ) . toBe ( divA2 ) ;
172
173
expect ( divB ) . toBe ( divB2 ) ;
173
174
} ) ;
174
175
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
- ) ;
176
+ itThrowsWhenRendering (
177
+ 'a suspending component outside a Suspense node' ,
178
+ async render => {
179
+ await render (
180
+ < div >
181
+ < React . Suspense />
182
+ < AsyncText text = "Children" />
183
+ < React . Suspense />
184
+ </ div > ,
185
+ 1 ,
186
+ ) ;
187
+ } ,
188
+ 'A component suspended while responding to synchronous input.' ,
189
+ ) ;
191
190
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
- }
191
+ itThrowsWhenRendering (
192
+ 'a suspending component without a Suspense above' ,
193
+ async render => {
194
+ await render (
195
+ < div >
196
+ < AsyncText text = "Children" />
197
+ </ div > ,
198
+ 1 ,
199
+ ) ;
200
+ } ,
201
+ 'A component suspended while responding to synchronous input.' ,
202
+ ) ;
205
203
206
204
it ( 'does not get confused by throwing null' , ( ) => {
207
205
function Bad ( ) {
0 commit comments