@@ -200,6 +200,25 @@ describe('ReactFiberEvents', () => {
200
200
'Warning: validateDOMNesting: React event targets must be direct children of event components.' ,
201
201
) ;
202
202
} ) ;
203
+
204
+ it ( 'should warn if an event target has an event component as a child' , ( ) => {
205
+ const Test = ( ) => (
206
+ < EventComponent >
207
+ < EventTarget >
208
+ < EventComponent >
209
+ < span > Child 1</ span >
210
+ </ EventComponent >
211
+ </ EventTarget >
212
+ </ EventComponent >
213
+ ) ;
214
+
215
+ expect ( ( ) => {
216
+ ReactNoop . render ( < Test /> ) ;
217
+ expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
218
+ } ) . toWarnDev (
219
+ 'Warning: validateDOMNesting: React event targets must not have event components as children.' ,
220
+ ) ;
221
+ } ) ;
203
222
} ) ;
204
223
205
224
describe ( 'TestRenderer' , ( ) => {
@@ -368,6 +387,26 @@ describe('ReactFiberEvents', () => {
368
387
'Warning: validateDOMNesting: React event targets must be direct children of event components.' ,
369
388
) ;
370
389
} ) ;
390
+
391
+ it ( 'should warn if an event target has an event component as a child' , ( ) => {
392
+ const Test = ( ) => (
393
+ < EventComponent >
394
+ < EventTarget >
395
+ < EventComponent >
396
+ < span > Child 1</ span >
397
+ </ EventComponent >
398
+ </ EventTarget >
399
+ </ EventComponent >
400
+ ) ;
401
+
402
+ const root = ReactTestRenderer . create ( null ) ;
403
+ expect ( ( ) => {
404
+ root . update ( < Test /> ) ;
405
+ expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
406
+ } ) . toWarnDev (
407
+ 'Warning: validateDOMNesting: React event targets must not have event components as children.' ,
408
+ ) ;
409
+ } ) ;
371
410
} ) ;
372
411
373
412
describe ( 'ReactDOM' , ( ) => {
@@ -535,6 +574,26 @@ describe('ReactFiberEvents', () => {
535
574
'Warning: validateDOMNesting: React event targets must be direct children of event components.' ,
536
575
) ;
537
576
} ) ;
577
+
578
+ it ( 'should warn if an event target has an event component as a child' , ( ) => {
579
+ const Test = ( ) => (
580
+ < EventComponent >
581
+ < EventTarget >
582
+ < EventComponent >
583
+ < span > Child 1</ span >
584
+ </ EventComponent >
585
+ </ EventTarget >
586
+ </ EventComponent >
587
+ ) ;
588
+
589
+ expect ( ( ) => {
590
+ const container = document . createElement ( 'div' ) ;
591
+ ReactDOM . render ( < Test /> , container ) ;
592
+ expect ( Scheduler ) . toFlushWithoutYielding ( ) ;
593
+ } ) . toWarnDev (
594
+ 'Warning: validateDOMNesting: React event targets must not have event components as children.' ,
595
+ ) ;
596
+ } ) ;
538
597
} ) ;
539
598
540
599
describe ( 'ReactDOMServer' , ( ) => {
0 commit comments