From c61ee641fe4ae913db4888e0e62e107433ba2ea7 Mon Sep 17 00:00:00 2001 From: James Pike Date: Thu, 25 Jul 2019 09:20:26 +0100 Subject: [PATCH] [Shallow] Add tests for effects with inputs and cleanup (#15275) --- .../src/ReactShallowRenderer.js | 13 +--- .../ReactShallowRendererHooks-test.js | 75 +++++++++++++++++++ 2 files changed, 76 insertions(+), 12 deletions(-) diff --git a/packages/react-test-renderer/src/ReactShallowRenderer.js b/packages/react-test-renderer/src/ReactShallowRenderer.js index 09d31cb211613..3edda586f1dca 100644 --- 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), }; } } @@ -911,15 +911,4 @@ function getMaskedContext(contextTypes, unmaskedContext) { return context; } -function shouldRunEffectsBasedOnInputs( - before: Array | void | null, - after: Array, -) { - 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 index c4f7da88182cb..455b1cbe3294d 100644 --- 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 ( +
+ Hello {friend} with {cat} +
+ ); + } + + const shallowRenderer = createRenderer({callEffects: true}); + shallowRenderer.render(); + + 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', () => {