Fix shallow renderer set instance state after gDSFP before calling sCU

packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js

@@ -1201,6 +1201,40 @@ describe('ReactComponentLifeCycle', () => {
     expect(log).toEqual([]);
   });
 
+  it('should pass old state to shouldComponentUpdate even getDerivedStateFromProps return new state', () => {
+    const divRef = React.createRef();
+    class SimpleComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          value: props.value,
+        };
+      }
+
+      static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.value === prevState.value) {
+          return null;
+        }
+        return {value: nextProps.value};
+      }
+
+      shouldComponentUpdate(nextProps, nextState) {
+        return nextState.value !== this.state.value;
+      }
+
+      render() {
+        return <div ref={divRef}>value: {this.state.value}</div>;
+      }
+    }
+
+    const div = document.createElement('div');
+
+    ReactDOM.render(<SimpleComponent value="initial" />, div);
+    expect(divRef.current.textContent).toBe('value: initial');
+    ReactDOM.render(<SimpleComponent value="updated" />, div);
+    expect(divRef.current.textContent).toBe('value: updated');
+  });
+
   it('should call getSnapshotBeforeUpdate before mutations are committed', () => {
     const log = [];
 

packages/react-test-renderer/src/ReactShallowRenderer.js

@@ -157,7 +157,10 @@ class ReactShallowRenderer {
           this._updater,
         );
 
-        this._updateStateFromStaticLifecycle(element.props);
+        const updated = this._updateNewStateFromStaticLifecycle(element.props);
+        if (updated) {
+          this._instance.state = this._newState;
+        }
 
         if (element.type.hasOwnProperty('contextTypes')) {
           currentlyValidatingElement = element;
@@ -263,7 +266,7 @@ class ReactShallowRenderer {
         }
       }
     }
-    this._updateStateFromStaticLifecycle(props);
+    this._updateNewStateFromStaticLifecycle(props);
 
     // Read state after cWRP in case it calls setState
     const state = this._newState || oldState;
@@ -310,7 +313,7 @@ class ReactShallowRenderer {
     // because DOM refs are not available.
   }
 
-  _updateStateFromStaticLifecycle(props) {
+  _updateNewStateFromStaticLifecycle(props) {
     const {type} = this._element;
 
     if (typeof type.getDerivedStateFromProps === 'function') {
@@ -323,9 +326,11 @@ class ReactShallowRenderer {
 
       if (partialState != null) {
         const newState = Object.assign({}, oldState, partialState);
-        this._instance.state = this._newState = newState;
+        this._newState = newState;
+        return true;
       }
     }
+    return false;
   }
 }
 

packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js

@@ -942,6 +942,42 @@ describe('ReactShallowRenderer', () => {
     expect(result).toEqual(<div>value:1</div>);
   });
 
+  it('should pass old state to shouldComponentUpdate even getDerivedStateFromProps return new state', () => {
+    class SimpleComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          value: props.value,
+        };
+      }
+
+      static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.value === prevState.value) {
+          return null;
+        }
+        return {value: nextProps.value};
+      }
+
+      shouldComponentUpdate(nextProps, nextState) {
+        return nextState.value !== this.state.value;
+      }
+
+      render() {
+        return <div>{`value:${this.state.value}`}</div>;
+      }
+    }
+
+    const shallowRenderer = createRenderer();
+    const initialResult = shallowRenderer.render(
+      <SimpleComponent value="initial" />,
+    );
+    expect(initialResult).toEqual(<div>value:initial</div>);
+    const updatedResult = shallowRenderer.render(
+      <SimpleComponent value="updated" />,
+    );
+    expect(updatedResult).toEqual(<div>value:updated</div>);
+  });
+
   it('can setState with an updater function', () => {
     let instance;