Port more tests to the Scheduler.unstable_yieldValue pattern and drop internal.js (#18549)

* Drop the .internal.js suffix on some files that don't need it anymore

* Port some ops patterns to scheduler yield

* Fix triangle test to avoid side-effects in constructor

* Move replaying of setState updaters until after the effect

Otherwise any warnings get silenced if they're deduped.

* Drop .internal.js in more files

* Don't check propTypes on a simple memo component unless it's lazy

Comparing the elementType doesn't work for this because it will never be
the same for a simple element.

This caused us to double validate these. This was covered up because in
internal tests this was deduped since they shared the prop types cache
but since we now inline it, it doesn't get deduped.

Author: sebmarkbage

packages/create-subscription/src/__tests__/createSubscription-test.internal.js renamed to packages/create-subscription/src/__tests__/createSubscription-test.js

@@ -470,7 +470,7 @@ describe('ChangeEventPlugin', () => {
     beforeEach(() => {
       jest.resetModules();
       ReactFeatureFlags = require('shared/ReactFeatureFlags');
-      ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+
       React = require('react');
       ReactDOM = require('react-dom');
       TestUtils = require('react-dom/test-utils');
@@ -481,13 +481,11 @@ describe('ChangeEventPlugin', () => {
       const root = ReactDOM.createRoot(container);
       let input;
 
-      let ops = [];
-
       class ControlledInput extends React.Component {
         state = {value: 'initial'};
         onChange = event => this.setState({value: event.target.value});
         render() {
-          ops.push(`render: ${this.state.value}`);
+          Scheduler.unstable_yieldValue(`render: ${this.state.value}`);
           const controlledValue =
             this.state.value === 'changed' ? 'changed [!]' : this.state.value;
           return (
@@ -504,22 +502,19 @@ describe('ChangeEventPlugin', () => {
       // Initial mount. Test that this is async.
       root.render(<ControlledInput />);
       // Should not have flushed yet.
-      expect(ops).toEqual([]);
+      expect(Scheduler).toHaveYielded([]);
       expect(input).toBe(undefined);
       // Flush callbacks.
-      Scheduler.unstable_flushAll();
-      expect(ops).toEqual(['render: initial']);
+      expect(Scheduler).toFlushAndYield(['render: initial']);
       expect(input.value).toBe('initial');
 
-      ops = [];
-
       // Trigger a change event.
       setUntrackedValue.call(input, 'changed');
       input.dispatchEvent(
         new Event('input', {bubbles: true, cancelable: true}),
       );
       // Change should synchronously flush
-      expect(ops).toEqual(['render: changed']);
+      expect(Scheduler).toHaveYielded(['render: changed']);
       // Value should be the controlled value, not the original one
       expect(input.value).toBe('changed [!]');
     });
@@ -528,15 +523,13 @@ describe('ChangeEventPlugin', () => {
       const root = ReactDOM.createRoot(container);
       let input;
 
-      let ops = [];
-
       class ControlledInput extends React.Component {
         state = {checked: false};
         onChange = event => {
           this.setState({checked: event.target.checked});
         };
         render() {
-          ops.push(`render: ${this.state.checked}`);
+          Scheduler.unstable_yieldValue(`render: ${this.state.checked}`);
           const controlledValue = this.props.reverse
             ? !this.state.checked
             : this.state.checked;
@@ -554,49 +547,42 @@ describe('ChangeEventPlugin', () => {
       // Initial mount. Test that this is async.
       root.render(<ControlledInput reverse={false} />);
       // Should not have flushed yet.
-      expect(ops).toEqual([]);
+      expect(Scheduler).toHaveYielded([]);
       expect(input).toBe(undefined);
       // Flush callbacks.
-      Scheduler.unstable_flushAll();
-      expect(ops).toEqual(['render: false']);
+      expect(Scheduler).toFlushAndYield(['render: false']);
       expect(input.checked).toBe(false);
 
-      ops = [];
-
       // Trigger a change event.
       input.dispatchEvent(
         new MouseEvent('click', {bubbles: true, cancelable: true}),
       );
       // Change should synchronously flush
-      expect(ops).toEqual(['render: true']);
+      expect(Scheduler).toHaveYielded(['render: true']);
       expect(input.checked).toBe(true);
 
       // Now let's make sure we're using the controlled value.
       root.render(<ControlledInput reverse={true} />);
-      Scheduler.unstable_flushAll();
-
-      ops = [];
+      expect(Scheduler).toFlushAndYield(['render: true']);
 
       // Trigger another change event.
       input.dispatchEvent(
         new MouseEvent('click', {bubbles: true, cancelable: true}),
       );
       // Change should synchronously flush
-      expect(ops).toEqual(['render: true']);
+      expect(Scheduler).toHaveYielded(['render: true']);
       expect(input.checked).toBe(false);
     });
 
     it.experimental('textarea', () => {
       const root = ReactDOM.createRoot(container);
       let textarea;
 
-      let ops = [];
-
       class ControlledTextarea extends React.Component {
         state = {value: 'initial'};
         onChange = event => this.setState({value: event.target.value});
         render() {
-          ops.push(`render: ${this.state.value}`);
+          Scheduler.unstable_yieldValue(`render: ${this.state.value}`);
           const controlledValue =
             this.state.value === 'changed' ? 'changed [!]' : this.state.value;
           return (
@@ -613,22 +599,19 @@ describe('ChangeEventPlugin', () => {
       // Initial mount. Test that this is async.
       root.render(<ControlledTextarea />);
       // Should not have flushed yet.
-      expect(ops).toEqual([]);
+      expect(Scheduler).toHaveYielded([]);
       expect(textarea).toBe(undefined);
       // Flush callbacks.
-      Scheduler.unstable_flushAll();
-      expect(ops).toEqual(['render: initial']);
+      expect(Scheduler).toFlushAndYield(['render: initial']);
       expect(textarea.value).toBe('initial');
 
-      ops = [];
-
       // Trigger a change event.
       setUntrackedTextareaValue.call(textarea, 'changed');
       textarea.dispatchEvent(
         new Event('input', {bubbles: true, cancelable: true}),
       );
       // Change should synchronously flush
-      expect(ops).toEqual(['render: changed']);
+      expect(Scheduler).toHaveYielded(['render: changed']);
       // Value should be the controlled value, not the original one
       expect(textarea.value).toBe('changed [!]');
     });
@@ -637,13 +620,11 @@ describe('ChangeEventPlugin', () => {
       const root = ReactDOM.createRoot(container);
       let input;
 
-      let ops = [];
-
       class ControlledInput extends React.Component {
         state = {value: 'initial'};
         onChange = event => this.setState({value: event.target.value});
         render() {
-          ops.push(`render: ${this.state.value}`);
+          Scheduler.unstable_yieldValue(`render: ${this.state.value}`);
           const controlledValue =
             this.state.value === 'changed' ? 'changed [!]' : this.state.value;
           return (
@@ -664,22 +645,19 @@ describe('ChangeEventPlugin', () => {
       // Initial mount. Test that this is async.
       root.render(<ControlledInput />);
       // Should not have flushed yet.
-      expect(ops).toEqual([]);
+      expect(Scheduler).toHaveYielded([]);
       expect(input).toBe(undefined);
       // Flush callbacks.
-      Scheduler.unstable_flushAll();
-      expect(ops).toEqual(['render: initial']);
+      expect(Scheduler).toFlushAndYield(['render: initial']);
       expect(input.value).toBe('initial');
 
-      ops = [];
-
       // Trigger a change event.
       setUntrackedValue.call(input, 'changed');
       input.dispatchEvent(
         new Event('input', {bubbles: true, cancelable: true}),
       );
       // Change should synchronously flush
-      expect(ops).toEqual(['render: changed']);
+      expect(Scheduler).toHaveYielded(['render: changed']);
       // Value should be the controlled value, not the original one
       expect(input.value).toBe('changed [!]');
     });
@@ -688,16 +666,14 @@ describe('ChangeEventPlugin', () => {
       const root = ReactDOM.createRoot(container);
       let input;
 
-      let ops = [];
-
       class ControlledInput extends React.Component {
         state = {value: 'initial'};
         onChange = event => this.setState({value: event.target.value});
         reset = () => {
           this.setState({value: ''});
         };
         render() {
-          ops.push(`render: ${this.state.value}`);
+          Scheduler.unstable_yieldValue(`render: ${this.state.value}`);
           const controlledValue =
             this.state.value === 'changed' ? 'changed [!]' : this.state.value;
           return (
@@ -715,27 +691,23 @@ describe('ChangeEventPlugin', () => {
       // Initial mount. Test that this is async.
       root.render(<ControlledInput />);
       // Should not have flushed yet.
-      expect(ops).toEqual([]);
+      expect(Scheduler).toHaveYielded([]);
       expect(input).toBe(undefined);
       // Flush callbacks.
-      Scheduler.unstable_flushAll();
-      expect(ops).toEqual(['render: initial']);
+      expect(Scheduler).toFlushAndYield(['render: initial']);
       expect(input.value).toBe('initial');
 
-      ops = [];
-
       // Trigger a click event
       input.dispatchEvent(
         new Event('click', {bubbles: true, cancelable: true}),
       );
       // Nothing should have changed
-      expect(ops).toEqual([]);
+      expect(Scheduler).toHaveYielded([]);
       expect(input.value).toBe('initial');
 
       // Flush callbacks.
-      Scheduler.unstable_flushAll();
       // Now the click update has flushed.
-      expect(ops).toEqual(['render: ']);
+      expect(Scheduler).toFlushAndYield(['render: ']);
       expect(input.value).toBe('');
     });
 

packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js renamed to packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js

@@ -12,7 +12,6 @@
 describe('SimpleEventPlugin', function() {
   let React;
   let ReactDOM;
-  let ReactFeatureFlags;
   let Scheduler;
 
   let onClick;
@@ -184,7 +183,6 @@ describe('SimpleEventPlugin', function() {
     container = document.createElement('div');
     document.body.appendChild(container);
 
-    const ops = [];
     let button;
     class Button extends React.Component {
       state = {count: 0};
@@ -193,7 +191,7 @@ describe('SimpleEventPlugin', function() {
           count: state.count + 1,
         }));
       componentDidUpdate() {
-        ops.push(`didUpdate - Count: ${this.state.count}`);
+        Scheduler.unstable_yieldValue(`didUpdate - Count: ${this.state.count}`);
       }
       render() {
         return (
@@ -221,20 +219,19 @@ describe('SimpleEventPlugin', function() {
 
     ReactDOM.render(<Button />, container);
     expect(button.textContent).toEqual('Count: 0');
-    expect(ops).toEqual([]);
+    expect(Scheduler).toHaveYielded([]);
 
     click();
 
     // There should be exactly one update.
-    expect(ops).toEqual(['didUpdate - Count: 3']);
+    expect(Scheduler).toHaveYielded(['didUpdate - Count: 3']);
     expect(button.textContent).toEqual('Count: 3');
   });
 
   describe('interactive events, in concurrent mode', () => {
     beforeEach(() => {
       jest.resetModules();
-      ReactFeatureFlags = require('shared/ReactFeatureFlags');
-      ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+
       ReactDOM = require('react-dom');
       Scheduler = require('scheduler');
     });
@@ -246,19 +243,17 @@ describe('SimpleEventPlugin', function() {
         const root = ReactDOM.createRoot(container);
         document.body.appendChild(container);
 
-        let ops = [];
-
         let button;
         class Button extends React.Component {
           state = {disabled: false};
           onClick = () => {
             // Perform some side-effect
-            ops.push('Side-effect');
+            Scheduler.unstable_yieldValue('Side-effect');
             // Disable the button
             this.setState({disabled: true});
           };
           render() {
-            ops.push(
+            Scheduler.unstable_yieldValue(
               `render button: ${this.state.disabled ? 'disabled' : 'enabled'}`,
             );
             return (
@@ -274,13 +269,10 @@ describe('SimpleEventPlugin', function() {
         // Initial mount
         root.render(<Button />);
         // Should not have flushed yet because it's async
-        expect(ops).toEqual([]);
+        expect(Scheduler).toHaveYielded([]);
         expect(button).toBe(undefined);
         // Flush async work
-        Scheduler.unstable_flushAll();
-        expect(ops).toEqual(['render button: enabled']);
-
-        ops = [];
+        expect(Scheduler).toFlushAndYield(['render button: enabled']);
 
         function click() {
           button.dispatchEvent(
@@ -290,35 +282,30 @@ describe('SimpleEventPlugin', function() {
 
         // Click the button to trigger the side-effect
         click();
-        expect(ops).toEqual([
+        expect(Scheduler).toHaveYielded([
           // The handler fired
           'Side-effect',
           // but the component did not re-render yet, because it's async
         ]);
 
-        ops = [];
-
         // Click the button again
         click();
-        expect(ops).toEqual([
+        expect(Scheduler).toHaveYielded([
           // Before handling this second click event, the previous interactive
           // update is flushed
           'render button: disabled',
           // The event handler was removed from the button, so there's no second
           // side-effect
         ]);
 
-        ops = [];
-
         // The handler should not fire again no matter how many times we
         // click the handler.
         click();
         click();
         click();
         click();
         click();
-        Scheduler.unstable_flushAll();
-        expect(ops).toEqual([]);
+        expect(Scheduler).toFlushAndYield([]);
       },
     );