@@ -17,24 +17,18 @@ describe('React hooks DevTools integration', () => {
17
17
let act ;
18
18
let overrideHookState ;
19
19
let overrideProps ;
20
- let suspendedFibers ;
20
+ let overrideSuspense ;
21
21
22
22
beforeEach ( ( ) => {
23
- suspendedFibers = new Set ( ) ;
24
23
global . __REACT_DEVTOOLS_GLOBAL_HOOK__ = {
25
24
inject : injected => {
26
25
overrideHookState = injected . overrideHookState ;
27
26
overrideProps = injected . overrideProps ;
27
+ overrideSuspense = injected . overrideSuspense ;
28
28
} ,
29
29
supportsFiber : true ,
30
30
onCommitFiberRoot : ( ) => { } ,
31
31
onCommitFiberUnmount : ( ) => { } ,
32
- shouldSuspendFiber ( rendererId , fiber ) {
33
- return (
34
- suspendedFibers . has ( fiber ) ||
35
- ( fiber . alternate && suspendedFibers . has ( fiber . alternate ) )
36
- ) ;
37
- } ,
38
32
} ;
39
33
40
34
jest . resetModules ( ) ;
@@ -184,40 +178,56 @@ describe('React hooks DevTools integration', () => {
184
178
}
185
179
} ) ;
186
180
187
- it ( 'should support triggering suspense in DEV' , ( ) => {
181
+ it ( 'should support overriding suspense' , ( ) => {
182
+ if ( __DEV__ ) {
183
+ // Lock the first render
184
+ overrideSuspense ( ( ) => true ) ;
185
+ }
186
+
188
187
function MyComponent ( ) {
189
188
return 'Done' ;
190
189
}
191
190
192
191
const renderer = ReactTestRenderer . create (
193
- < React . Suspense fallback = { 'Loading' } >
194
- < MyComponent />
195
- </ React . Suspense > ,
192
+ < div >
193
+ < React . Suspense fallback = { 'Loading' } >
194
+ < MyComponent />
195
+ </ React . Suspense >
196
+ </ div > ,
196
197
) ;
197
- expect ( renderer . toJSON ( ) ) . toEqual ( 'Done' ) ;
198
-
199
- const fiber = renderer . root . _currentFiber ( ) . return ;
198
+ const fiber = renderer . root . _currentFiber ( ) . child ;
200
199
if ( __DEV__ ) {
201
- // Mark as loading
202
- suspendedFibers . add ( fiber ) ;
200
+ // First render was locked
201
+ expect ( renderer . toJSON ( ) . children ) . toEqual ( [ 'Loading' ] ) ;
203
202
overrideProps ( fiber , [ ] , null ) ; // Re-render
204
- expect ( renderer . toJSON ( ) ) . toEqual ( 'Loading' ) ;
203
+ expect ( renderer . toJSON ( ) . children ) . toEqual ( [ 'Loading' ] ) ;
204
+ // Release the lock
205
+ overrideSuspense ( ( ) => false ) ;
205
206
206
207
overrideProps ( fiber , [ ] , null ) ; // Re-render
207
- expect ( renderer . toJSON ( ) ) . toEqual ( 'Loading' ) ;
208
+ expect ( renderer . toJSON ( ) . children ) . toEqual ( [ 'Done' ] ) ;
209
+ overrideProps ( fiber , [ ] , null ) ; // Re-render
210
+ expect ( renderer . toJSON ( ) . children ) . toEqual ( [ 'Done' ] ) ;
208
211
209
- // Mark as done
210
- suspendedFibers . delete ( fiber ) ;
212
+ // Lock again
213
+ overrideSuspense ( ( ) => true ) ;
211
214
overrideProps ( fiber , [ ] , null ) ; // Re-render
212
- expect ( renderer . toJSON ( ) ) . toEqual ( 'Done' ) ;
215
+ expect ( renderer . toJSON ( ) . children ) . toEqual ( [ 'Loading' ] ) ;
213
216
217
+ // Release the lock again
218
+ overrideSuspense ( ( ) => false ) ;
214
219
overrideProps ( fiber , [ ] , null ) ; // Re-render
215
- expect ( renderer . toJSON ( ) ) . toEqual ( 'Done' ) ;
220
+ expect ( renderer . toJSON ( ) . children ) . toEqual ( [ 'Done' ] ) ;
216
221
217
- // Mark as loading again
218
- suspendedFibers . add ( fiber ) ;
222
+ // Ensure it checks specific fibers.
223
+ overrideSuspense ( f => f === fiber || f === fiber . alternate ) ;
224
+ overrideProps ( fiber , [ ] , null ) ; // Re-render
225
+ expect ( renderer . toJSON ( ) . children ) . toEqual ( [ 'Loading' ] ) ;
226
+ overrideSuspense ( f => f !== fiber && f !== fiber . alternate ) ;
219
227
overrideProps ( fiber , [ ] , null ) ; // Re-render
220
- expect ( renderer . toJSON ( ) ) . toEqual ( 'Loading' ) ;
228
+ expect ( renderer . toJSON ( ) . children ) . toEqual ( [ 'Done' ] ) ;
229
+ } else {
230
+ expect ( renderer . toJSON ( ) . children ) . toEqual ( [ 'Done' ] ) ;
221
231
}
222
232
} ) ;
223
233
} ) ;
0 commit comments