@@ -520,78 +520,82 @@ describe('ReactCompositeComponent-state', () => {
520520 assertLog ( [
521521 'render -- step: 3, extra: false' ,
522522 'callback -- step: 3, extra: false' ,
523-
524- // A second time for the retry.
525- 'render -- step: 3, extra: false' ,
526- 'callback -- step: 3, extra: false' ,
527523 ] ) ;
528524 } ) ;
529525
530- if ( ! require ( 'shared/ReactFeatureFlags' ) . disableModulePatternComponents ) {
531- it ( 'should support stateful module pattern components' , async ( ) => {
532- function Child ( ) {
533- return {
534- state : {
535- count : 123 ,
536- } ,
537- render ( ) {
538- return < div > { `count:${ this . state . count } } </ div > ;
539- } ,
540- } ;
541- }
542-
543- const el = document . createElement ( 'div' ) ;
544- const root = ReactDOMClient . createRoot ( el ) ;
545- expect ( ( ) => {
546- ReactDOM . flushSync ( ( ) => {
547- root . render ( < Child /> ) ;
548- } ) ;
549- } ) . toErrorDev (
550- 'Warning: The <Child /> component appears to be a function component that returns a class instance. ' +
551- 'Change Child to a class that extends React.Component instead. ' +
552- "If you can't use a class try assigning the prototype on the function as a workaround. " +
553- '`Child.prototype = React.Component.prototype`. ' +
554- "Don't use an arrow function since it cannot be called with `new` by React." ,
555- ) ;
526+ // @gate !disableModulePatternComponents
527+ it ( 'should support stateful module pattern components' , async ( ) => {
528+ function Child ( ) {
529+ return {
530+ state : {
531+ count : 123 ,
532+ } ,
533+ render ( ) {
534+ return < div > { `count:${ this . state . count } } </ div > ;
535+ } ,
536+ } ;
537+ }
556538
557- expect ( el . textContent ) . toBe ( 'count:123' ) ;
558- } ) ;
539+ const el = document . createElement ( 'div' ) ;
540+ const root = ReactDOMClient . createRoot ( el ) ;
541+ expect ( ( ) => {
542+ ReactDOM . flushSync ( ( ) => {
543+ root . render ( < Child /> ) ;
544+ } ) ;
545+ } ) . toErrorDev (
546+ 'Warning: The <Child /> component appears to be a function component that returns a class instance. ' +
547+ 'Change Child to a class that extends React.Component instead. ' +
548+ "If you can't use a class try assigning the prototype on the function as a workaround. " +
549+ '`Child.prototype = React.Component.prototype`. ' +
550+ "Don't use an arrow function since it cannot be called with `new` by React." ,
551+ ) ;
552+
553+ expect ( el . textContent ) . toBe ( 'count:123' ) ;
554+ } ) ;
559555
560- it ( 'should support getDerivedStateFromProps for module pattern components' , async ( ) => {
561- function Child ( ) {
562- return {
563- state : {
564- count : 1 ,
565- } ,
566- render ( ) {
567- return < div > { `count: ${ this . state . count } ` } </ div > ;
568- } ,
569- } ;
570- }
571- Child . getDerivedStateFromProps = ( props , prevState ) => {
572- return {
573- count : prevState . count + props . incrementBy ,
574- } ;
556+ // @gate !disableModulePatternComponents
557+ it ( 'should support getDerivedStateFromProps for module pattern components' , async ( ) => {
558+ function Child ( ) {
559+ return {
560+ state : {
561+ count : 1 ,
562+ } ,
563+ render ( ) {
564+ return < div > { `count: ${ this . state . count } ` } </ div > ;
565+ } ,
566+ } ;
567+ }
568+ Child . getDerivedStateFromProps = ( props , prevState ) => {
569+ return {
570+ count : prevState . count + props . incrementBy ,
575571 } ;
572+ } ;
576573
577- const el = document . createElement ( 'div' ) ;
578- const root = ReactDOMClient . createRoot ( el ) ;
579- await act ( ( ) => {
574+ const el = document . createElement ( 'div' ) ;
575+ const root = ReactDOMClient . createRoot ( el ) ;
576+ expect ( ( ) => {
577+ ReactDOM . flushSync ( ( ) => {
580578 root . render ( < Child incrementBy = { 0 } /> ) ;
581579 } ) ;
580+ } ) . toErrorDev (
581+ 'Warning: The <Child /> component appears to be a function component that returns a class instance. ' +
582+ 'Change Child to a class that extends React.Component instead. ' +
583+ "If you can't use a class try assigning the prototype on the function as a workaround. " +
584+ '`Child.prototype = React.Component.prototype`. ' +
585+ "Don't use an arrow function since it cannot be called with `new` by React." ,
586+ ) ;
582587
583- expect ( el . textContent ) . toBe ( 'count:1' ) ;
584- await act ( ( ) => {
585- root . render ( < Child incrementBy = { 2 } /> ) ;
586- } ) ;
587- expect ( el . textContent ) . toBe ( 'count:3' ) ;
588+ expect ( el . textContent ) . toBe ( 'count:1' ) ;
589+ await act ( ( ) => {
590+ root . render ( < Child incrementBy = { 2 } /> ) ;
591+ } ) ;
592+ expect ( el . textContent ) . toBe ( 'count:3' ) ;
588593
589- await act ( ( ) => {
590- root . render ( < Child incrementBy = { 1 } /> ) ;
591- } ) ;
592- expect ( el . textContent ) . toBe ( 'count:4' ) ;
594+ await act ( ( ) => {
595+ root . render ( < Child incrementBy = { 1 } /> ) ;
593596 } ) ;
594- }
597+ expect ( el . textContent ) . toBe ( 'count:4' ) ;
598+ } ) ;
595599
596600 it ( 'should not support setState in componentWillUnmount' , async ( ) => {
597601 let subscription ;
0 commit comments