[ShallowRenderer] Queue/rerender on dispatched action after render co…

…mponent with hooks (#14802)

* [shallow-renderer] Rerender on dispatched action out of render

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

@@ -384,7 +384,7 @@ class ReactShallowRenderer {
         'an infinite loop.',
     );
 
-    if (componentIdentity === this._currentlyRenderingComponent) {
+    if (componentIdentity === this._previousComponentIdentity) {
       // This is a render phase update. Stash it in a lazily-created map of
       // queue -> linked list of updates. After this render pass, we'll restart
       // and apply the stashed updates on top of the work-in-progress hook.
@@ -408,10 +408,13 @@ class ReactShallowRenderer {
         }
         lastRenderPhaseUpdate.next = update;
       }
+
+      if (!this._rendering) {
+        this.render(this._element, this._context);
+      }
     } else {
       // This means an update has happened after the function component has
-      // returned. On the server this is a no-op. In React Fiber, the update
-      // would be scheduled for a future render.
+      // returned from a different component.
     }
   }
 

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

@@ -90,6 +90,39 @@ describe('ReactShallowRenderer with hooks', () => {
     );
   });
 
+  it('should work with updating a value from useState outside the render', () => {
+    function SomeComponent({defaultName}) {
+      const [name, updateName] = React.useState(defaultName);
+
+      return (
+        <div onClick={() => updateName('Dan')}>
+          <p>
+            Your name is: <span>{name}</span>
+          </p>
+        </div>
+      );
+    }
+
+    const shallowRenderer = createRenderer();
+    const element = <SomeComponent defaultName={'Dominic'} />;
+    const result = shallowRenderer.render(element);
+
+    expect(result.props.children).toEqual(
+      <p>
+        Your name is: <span>Dominic</span>
+      </p>,
+    );
+
+    result.props.onClick();
+    const updated = shallowRenderer.render(element);
+
+    expect(updated.props.children).toEqual(
+      <p>
+        Your name is: <span>Dan</span>
+      </p>,
+    );
+  });
+
   it('should work with useReducer', () => {
     function reducer(state, action) {
       switch (action.type) {