@@ -233,8 +233,12 @@ describe('ReactShallowRenderer with hooks', () => {
233233 effectsCalled . push ( 'useEffect' ) ;
234234 } ) ;
235235
236+ React . useInsertionEffect ( ( ) => {
237+ effectsCalled . push ( 'useInsertionEffect' ) ;
238+ } ) ;
239+
236240 React . useLayoutEffect ( ( ) => {
237- effectsCalled . push ( 'useEffect ' ) ;
241+ effectsCalled . push ( 'useLayoutEffect ' ) ;
238242 } ) ;
239243
240244 return < div > Hello world</ div > ;
@@ -482,4 +486,74 @@ describe('ReactShallowRenderer with hooks', () => {
482486 result = shallowRenderer . render ( element ) ;
483487 expect ( result ) . toEqual ( 5 ) ;
484488 } ) ;
489+
490+ it ( 'should work with useId' , ( ) => {
491+ function SomeComponent ( { defaultName} ) {
492+ const id = React . useId ( ) ;
493+ const id2 = React . useId ( ) ;
494+
495+ return (
496+ < div >
497+ < div id = { id } />
498+ < div id = { id2 } />
499+ </ div >
500+ ) ;
501+ }
502+
503+ const shallowRenderer = createRenderer ( ) ;
504+ let result = shallowRenderer . render ( < SomeComponent /> ) ;
505+
506+ expect ( result ) . toEqual (
507+ < div >
508+ < div id = ":r1:" />
509+ < div id = ":r2:" />
510+ </ div > ,
511+ ) ;
512+
513+ result = shallowRenderer . render ( < SomeComponent /> ) ;
514+
515+ expect ( result ) . toEqual (
516+ < div >
517+ < div id = ":r1:" />
518+ < div id = ":r2:" />
519+ </ div > ,
520+ ) ;
521+ } ) ;
522+
523+ it ( 'should work with useSyncExternalStore' , ( ) => {
524+ function createExternalStore ( initialState ) {
525+ const listeners = new Set ( ) ;
526+ let currentState = initialState ;
527+ return {
528+ set ( text ) {
529+ currentState = text ;
530+ listeners . forEach ( listener => listener ( ) ) ;
531+ } ,
532+ subscribe ( listener ) {
533+ listeners . add ( listener ) ;
534+ return ( ) => listeners . delete ( listener ) ;
535+ } ,
536+ getState ( ) {
537+ return currentState ;
538+ } ,
539+ getSubscriberCount ( ) {
540+ return listeners . size ;
541+ } ,
542+ } ;
543+ }
544+
545+ const store = createExternalStore ( 'hello' ) ;
546+
547+ function SomeComponent ( ) {
548+ const value = React . useSyncExternalStore ( store . subscribe , store . getState ) ;
549+ return < div > { value } </ div > ;
550+ }
551+
552+ const shallowRenderer = createRenderer ( ) ;
553+ let result = shallowRenderer . render ( < SomeComponent /> ) ;
554+ expect ( result ) . toEqual ( < div > hello</ div > ) ;
555+ store . set ( 'goodbye' ) ;
556+ result = shallowRenderer . render ( < SomeComponent /> ) ;
557+ expect ( result ) . toEqual ( < div > goodbye</ div > ) ;
558+ } ) ;
485559} ) ;
0 commit comments