[Shallow] Add tests for effects with inputs and cleanup (facebook#15275)

insidewhy · Jul 25, 2019 · b029466 · b029466
1 parent a16136a
commit b029466
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 22 deletions.
diff --git a/packages/react-test-renderer/src/ReactShallowRenderer.js b/packages/react-test-renderer/src/ReactShallowRenderer.js
@@ -346,7 +346,7 @@ class ReactShallowRenderer {
             cleanup: memoizedState.cleanup,
             run:
               inputs == null ||
-              shouldRunEffectsBasedOnInputs(memoizedState.inputs, inputs),
+              !areHookInputsEqual(inputs, memoizedState.inputs),
           };
         }
       }
@@ -677,7 +677,10 @@ class ReactShallowRenderer {
             ReactCurrentDispatcher.current = prevDispatcher;
           }
           this._finishHooks(element, context);
-          this._callEffectsIfDesired();
+          if (this._options.callEffects) {
+            this._callEffects(true);
+            this._callEffects(false);
+          }
         }
       }
     }
@@ -738,15 +741,6 @@ class ReactShallowRenderer {
     // because DOM refs are not available.
   }
 
-  _callEffectsIfDesired() {
-    if (!this._options.callEffects) {
-      return;
-    }
-
-    this._callEffects(true);
-    this._callEffects(false);
-  }
-
   _callEffects(callLayoutEffects: boolean) {
     for (
       let hook = this._firstWorkInProgressHook;
@@ -911,15 +905,4 @@ function getMaskedContext(contextTypes, unmaskedContext) {
   return context;
 }
 
-function shouldRunEffectsBasedOnInputs(
-  before: Array<mixed> | void | null,
-  after: Array<mixed>,
-) {
-  if (before == null || before.length !== after.length) {
-    return true;
-  }
-
-  return before.some((value, i) => after[i] !== value);
-}
-
 export default ReactShallowRenderer;
diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRendererHooks-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRendererHooks-test.js
@@ -280,6 +280,81 @@ describe('ReactShallowRenderer with hooks', () => {
         'call effect',
       ]);
     });
+
+    it('should trigger effects and cleanup depending on inputs', () => {
+      let _setFriend;
+      const happenings = [];
+
+      function SomeComponent() {
+        const [friend, setFriend] = React.useState('Bons');
+        const [cat] = React.useState('Muskus');
+        _setFriend = setFriend;
+
+        React.useEffect(
+          () => {
+            happenings.push('call friend effect');
+            return () => {
+              happenings.push('cleanup friend effect');
+            };
+          },
+          [friend],
+        );
+
+        React.useEffect(() => {
+          happenings.push('call empty effect');
+          return () => {
+            happenings.push('cleanup empty effect');
+          };
+        });
+
+        React.useEffect(
+          () => {
+            happenings.push('call cat effect');
+            return () => {
+              happenings.push('cleanup cat effect');
+            };
+          },
+          [cat],
+        );
+
+        React.useEffect(
+          () => {
+            happenings.push('call both effect');
+            return () => {
+              happenings.push('cleanup both effect');
+            };
+          },
+          [friend, cat],
+        );
+
+        return (
+          <div>
+            Hello {friend} with {cat}
+          </div>
+        );
+      }
+
+      const shallowRenderer = createRenderer({callEffects: true});
+      shallowRenderer.render(<SomeComponent />);
+
+      expect(happenings).toEqual([
+        'call friend effect',
+        'call empty effect',
+        'call cat effect',
+        'call both effect',
+      ]);
+
+      happenings.splice(0);
+      _setFriend('Maryam');
+      expect(happenings).toEqual([
+        'cleanup friend effect',
+        'call friend effect',
+        'cleanup empty effect',
+        'call empty effect',
+        'cleanup both effect',
+        'call both effect',
+      ]);
+    });
   });
 
   it('should work with useRef', () => {