10
10
import type { FrontendBridge } from 'react-devtools-shared/src/bridge' ;
11
11
import type Store from 'react-devtools-shared/src/devtools/store' ;
12
12
13
+ import { getVersionedRenderImplementation } from './utils' ;
14
+
13
15
describe ( 'Store component filters' , ( ) => {
14
16
let React ;
15
17
let Types ;
16
18
let bridge : FrontendBridge ;
17
- let legacyRender ;
18
19
let store : Store ;
19
20
let utils ;
20
-
21
- const act = async ( callback : Function ) => {
22
- if ( React . act != null ) {
23
- await React . act ( callback ) ;
24
- } else if ( React . unstable_act != null ) {
25
- await React . unstable_act ( callback ) ;
26
- } else {
27
- callback ( ) ;
28
- }
29
-
30
- jest . runAllTimers ( ) ; // Flush Bridge operations
31
- } ;
21
+ let actAsync ;
32
22
33
23
beforeEach ( ( ) => {
34
24
bridge = global . bridge ;
@@ -41,12 +31,14 @@ describe('Store component filters', () => {
41
31
Types = require ( 'react-devtools-shared/src/frontend/types' ) ;
42
32
utils = require ( './utils' ) ;
43
33
44
- legacyRender = utils . legacyRender ;
34
+ actAsync = utils . actAsync ;
45
35
} ) ;
46
36
37
+ const { render} = getVersionedRenderImplementation ( ) ;
38
+
47
39
// @reactVersion >= 16.0
48
40
it ( 'should throw if filters are updated while profiling' , async ( ) => {
49
- await act ( async ( ) => store . profilerStore . startProfiling ( ) ) ;
41
+ await actAsync ( async ( ) => store . profilerStore . startProfiling ( ) ) ;
50
42
expect ( ( ) => ( store . componentFilters = [ ] ) ) . toThrow (
51
43
'Cannot modify filter preferences while profiling' ,
52
44
) ;
@@ -61,12 +53,11 @@ describe('Store component filters', () => {
61
53
}
62
54
const FunctionComponent = ( ) => < div > Hi</ div > ;
63
55
64
- await act ( async ( ) =>
65
- legacyRender (
56
+ await actAsync ( async ( ) =>
57
+ render (
66
58
< ClassComponent >
67
59
< FunctionComponent />
68
60
</ ClassComponent > ,
69
- document . createElement ( 'div' ) ,
70
61
) ,
71
62
) ;
72
63
expect ( store ) . toMatchInlineSnapshot ( `
@@ -77,7 +68,7 @@ describe('Store component filters', () => {
77
68
<div>
78
69
` ) ;
79
70
80
- await act (
71
+ await actAsync (
81
72
async ( ) =>
82
73
( store . componentFilters = [
83
74
utils . createElementTypeFilter ( Types . ElementTypeHostComponent ) ,
@@ -89,7 +80,7 @@ describe('Store component filters', () => {
89
80
<FunctionComponent>
90
81
` ) ;
91
82
92
- await act (
83
+ await actAsync (
93
84
async ( ) =>
94
85
( store . componentFilters = [
95
86
utils . createElementTypeFilter ( Types . ElementTypeClass ) ,
@@ -102,7 +93,7 @@ describe('Store component filters', () => {
102
93
<div>
103
94
` ) ;
104
95
105
- await act (
96
+ await actAsync (
106
97
async ( ) =>
107
98
( store . componentFilters = [
108
99
utils . createElementTypeFilter ( Types . ElementTypeClass ) ,
@@ -115,7 +106,7 @@ describe('Store component filters', () => {
115
106
<div>
116
107
` ) ;
117
108
118
- await act (
109
+ await actAsync (
119
110
async ( ) =>
120
111
( store . componentFilters = [
121
112
utils . createElementTypeFilter ( Types . ElementTypeClass , false ) ,
@@ -130,7 +121,7 @@ describe('Store component filters', () => {
130
121
<div>
131
122
` ) ;
132
123
133
- await act ( async ( ) => ( store . componentFilters = [ ] ) ) ;
124
+ await actAsync ( async ( ) => ( store . componentFilters = [ ] ) ) ;
134
125
expect ( store ) . toMatchInlineSnapshot ( `
135
126
[root]
136
127
▾ <ClassComponent>
@@ -144,16 +135,14 @@ describe('Store component filters', () => {
144
135
it ( 'should ignore invalid ElementTypeRoot filter' , async ( ) => {
145
136
const Component = ( ) => < div > Hi</ div > ;
146
137
147
- await act ( async ( ) =>
148
- legacyRender ( < Component /> , document . createElement ( 'div' ) ) ,
149
- ) ;
138
+ await actAsync ( async ( ) => render ( < Component /> ) ) ;
150
139
expect ( store ) . toMatchInlineSnapshot ( `
151
140
[root]
152
141
▾ <Component>
153
142
<div>
154
143
` ) ;
155
144
156
- await act (
145
+ await actAsync (
157
146
async ( ) =>
158
147
( store . componentFilters = [
159
148
utils . createElementTypeFilter ( Types . ElementTypeRoot ) ,
@@ -174,14 +163,13 @@ describe('Store component filters', () => {
174
163
const Bar = ( ) => < Text label = "bar" /> ;
175
164
const Baz = ( ) => < Text label = "baz" /> ;
176
165
177
- await act ( async ( ) =>
178
- legacyRender (
166
+ await actAsync ( async ( ) =>
167
+ render (
179
168
< React . Fragment >
180
169
< Foo />
181
170
< Bar />
182
171
< Baz />
183
172
</ React . Fragment > ,
184
- document . createElement ( 'div' ) ,
185
173
) ,
186
174
) ;
187
175
expect ( store ) . toMatchInlineSnapshot ( `
@@ -194,7 +182,7 @@ describe('Store component filters', () => {
194
182
<Text>
195
183
` ) ;
196
184
197
- await act (
185
+ await actAsync (
198
186
async ( ) =>
199
187
( store . componentFilters = [ utils . createDisplayNameFilter ( 'Foo' ) ] ) ,
200
188
) ;
@@ -207,7 +195,7 @@ describe('Store component filters', () => {
207
195
<Text>
208
196
` ) ;
209
197
210
- await act (
198
+ await actAsync (
211
199
async ( ) =>
212
200
( store . componentFilters = [ utils . createDisplayNameFilter ( 'Ba' ) ] ) ,
213
201
) ;
@@ -219,7 +207,7 @@ describe('Store component filters', () => {
219
207
<Text>
220
208
` ) ;
221
209
222
- await act (
210
+ await actAsync (
223
211
async ( ) =>
224
212
( store . componentFilters = [ utils . createDisplayNameFilter ( 'B.z' ) ] ) ,
225
213
) ;
@@ -237,16 +225,14 @@ describe('Store component filters', () => {
237
225
it ( 'should filter by path' , async ( ) => {
238
226
const Component = ( ) => < div > Hi</ div > ;
239
227
240
- await act ( async ( ) =>
241
- legacyRender ( < Component /> , document . createElement ( 'div' ) ) ,
242
- ) ;
228
+ await actAsync ( async ( ) => render ( < Component /> ) ) ;
243
229
expect ( store ) . toMatchInlineSnapshot ( `
244
230
[root]
245
231
▾ <Component>
246
232
<div>
247
233
` ) ;
248
234
249
- await act (
235
+ await actAsync (
250
236
async ( ) =>
251
237
( store . componentFilters = [
252
238
utils . createLocationFilter ( __filename . replace ( __dirname , '' ) ) ,
@@ -255,7 +241,7 @@ describe('Store component filters', () => {
255
241
256
242
expect ( store ) . toMatchInlineSnapshot ( `[root]` ) ;
257
243
258
- await act (
244
+ await actAsync (
259
245
async ( ) =>
260
246
( store . componentFilters = [
261
247
utils . createLocationFilter ( 'this:is:a:made:up:path' ) ,
@@ -277,7 +263,7 @@ describe('Store component filters', () => {
277
263
const Bar = ( ) => < Foo /> ;
278
264
Bar . displayName = 'Bar(Foo(Component))' ;
279
265
280
- await act ( async ( ) => legacyRender ( < Bar /> , document . createElement ( 'div' ) ) ) ;
266
+ await actAsync ( async ( ) => render ( < Bar /> ) ) ;
281
267
expect ( store ) . toMatchInlineSnapshot ( `
282
268
[root]
283
269
▾ <Component> [Bar][Foo]
@@ -286,7 +272,7 @@ describe('Store component filters', () => {
286
272
<div>
287
273
` ) ;
288
274
289
- await act (
275
+ await actAsync (
290
276
async ( ) => ( store . componentFilters = [ utils . createHOCFilter ( true ) ] ) ,
291
277
) ;
292
278
expect ( store ) . toMatchInlineSnapshot ( `
@@ -295,7 +281,7 @@ describe('Store component filters', () => {
295
281
<div>
296
282
` ) ;
297
283
298
- await act (
284
+ await actAsync (
299
285
async ( ) => ( store . componentFilters = [ utils . createHOCFilter ( false ) ] ) ,
300
286
) ;
301
287
expect ( store ) . toMatchInlineSnapshot ( `
@@ -309,29 +295,29 @@ describe('Store component filters', () => {
309
295
310
296
// @reactVersion >= 16.0
311
297
it ( 'should not send a bridge update if the set of enabled filters has not changed' , async ( ) => {
312
- await act (
298
+ await actAsync (
313
299
async ( ) => ( store . componentFilters = [ utils . createHOCFilter ( true ) ] ) ,
314
300
) ;
315
301
316
302
bridge . addListener ( 'updateComponentFilters' , componentFilters => {
317
303
throw Error ( 'Unexpected component update' ) ;
318
304
} ) ;
319
305
320
- await act (
306
+ await actAsync (
321
307
async ( ) =>
322
308
( store . componentFilters = [
323
309
utils . createHOCFilter ( false ) ,
324
310
utils . createHOCFilter ( true ) ,
325
311
] ) ,
326
312
) ;
327
- await act (
313
+ await actAsync (
328
314
async ( ) =>
329
315
( store . componentFilters = [
330
316
utils . createHOCFilter ( true ) ,
331
317
utils . createLocationFilter ( 'abc' , false ) ,
332
318
] ) ,
333
319
) ;
334
- await act (
320
+ await actAsync (
335
321
async ( ) =>
336
322
( store . componentFilters = [
337
323
utils . createHOCFilter ( true ) ,
@@ -363,29 +349,22 @@ describe('Store component filters', () => {
363
349
utils . createElementTypeFilter ( Types . ElementTypeSuspense ) ,
364
350
] ;
365
351
366
- const container = document . createElement ( 'div' ) ;
367
- await act ( async ( ) =>
368
- legacyRender ( < Wrapper shouldSuspend = { true } /> , container ) ,
369
- ) ;
352
+ await actAsync ( async ( ) => render ( < Wrapper shouldSuspend = { true } /> ) ) ;
370
353
expect ( store ) . toMatchInlineSnapshot ( `
371
354
[root]
372
355
▾ <Wrapper>
373
356
▾ <Loading>
374
357
<div>
375
358
` ) ;
376
359
377
- await act ( async ( ) =>
378
- legacyRender ( < Wrapper shouldSuspend = { false } /> , container ) ,
379
- ) ;
360
+ await actAsync ( async ( ) => render ( < Wrapper shouldSuspend = { false } /> ) ) ;
380
361
expect ( store ) . toMatchInlineSnapshot ( `
381
362
[root]
382
363
▾ <Wrapper>
383
364
<Component>
384
365
` ) ;
385
366
386
- await act ( async ( ) =>
387
- legacyRender ( < Wrapper shouldSuspend = { true } /> , container ) ,
388
- ) ;
367
+ await actAsync ( async ( ) => render ( < Wrapper shouldSuspend = { true } /> ) ) ;
389
368
expect ( store ) . toMatchInlineSnapshot ( `
390
369
[root]
391
370
▾ <Wrapper>
@@ -411,37 +390,28 @@ describe('Store component filters', () => {
411
390
return null ;
412
391
}
413
392
414
- // HACK This require() is needed (somewhere in the test) for this case to pass.
415
- // Without it, the legacyRender() call below causes this test to fail
416
- // because it requires "react-dom" for the first time,
417
- // which causes the console error() and warn() methods to be overridden again,
418
- // effectively disconnecting the DevTools override in 'react-devtools-shared/src/backend/console'.
419
- require ( 'react-dom' ) ;
420
-
421
- const container = document . createElement ( 'div' ) ;
422
- await act (
393
+ await actAsync (
423
394
async ( ) =>
424
395
( store . componentFilters = [
425
396
utils . createDisplayNameFilter ( 'Warning' ) ,
426
397
utils . createDisplayNameFilter ( 'Error' ) ,
427
398
] ) ,
428
399
) ;
429
400
utils . withErrorsOrWarningsIgnored ( [ 'test-only:' ] , ( ) => {
430
- legacyRender (
401
+ render (
431
402
< React . Fragment >
432
403
< ComponentWithError />
433
404
< ComponentWithWarning />
434
405
< ComponentWithWarningAndError />
435
406
</ React . Fragment > ,
436
- container ,
437
407
) ;
438
408
} ) ;
439
409
440
410
expect ( store ) . toMatchInlineSnapshot ( `` ) ;
441
411
expect ( store . errorCount ) . toBe ( 0 ) ;
442
412
expect ( store . warningCount ) . toBe ( 0 ) ;
443
413
444
- await act ( async ( ) => ( store . componentFilters = [ ] ) ) ;
414
+ await actAsync ( async ( ) => ( store . componentFilters = [ ] ) ) ;
445
415
expect ( store ) . toMatchInlineSnapshot ( `
446
416
✕ 2, ⚠ 2
447
417
[root]
@@ -450,7 +420,7 @@ describe('Store component filters', () => {
450
420
<ComponentWithWarningAndError> ✕⚠
451
421
` ) ;
452
422
453
- await act (
423
+ await actAsync (
454
424
async ( ) =>
455
425
( store . componentFilters = [ utils . createDisplayNameFilter ( 'Warning' ) ] ) ,
456
426
) ;
@@ -460,7 +430,7 @@ describe('Store component filters', () => {
460
430
<ComponentWithError> ✕
461
431
` ) ;
462
432
463
- await act (
433
+ await actAsync (
464
434
async ( ) =>
465
435
( store . componentFilters = [ utils . createDisplayNameFilter ( 'Error' ) ] ) ,
466
436
) ;
@@ -470,7 +440,7 @@ describe('Store component filters', () => {
470
440
<ComponentWithWarning> ⚠
471
441
` ) ;
472
442
473
- await act (
443
+ await actAsync (
474
444
async ( ) =>
475
445
( store . componentFilters = [
476
446
utils . createDisplayNameFilter ( 'Warning' ) ,
@@ -481,7 +451,7 @@ describe('Store component filters', () => {
481
451
expect ( store . errorCount ) . toBe ( 0 ) ;
482
452
expect ( store . warningCount ) . toBe ( 0 ) ;
483
453
484
- await act ( async ( ) => ( store . componentFilters = [ ] ) ) ;
454
+ await actAsync ( async ( ) => ( store . componentFilters = [ ] ) ) ;
485
455
expect ( store ) . toMatchInlineSnapshot ( `
486
456
✕ 2, ⚠ 2
487
457
[root]
0 commit comments