fix(open-amdocs#7): Upgraded to React 17, including fix to Scrollable…

… and effect cleanup timing

package.json

@@ -42,7 +42,7 @@
     "@rollup/plugin-babel": "5.2.1",
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-node-resolve": "10.0.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.1",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.2",
     "babel-plugin-module-resolver": "4.0.0",

src/hooks/useDebounce/useDebounce.js

@@ -24,10 +24,7 @@ export default (callback, wait) => {
     useEffect(() => {cb.current = callback}, [callback]);
 
     // Cleanup pending timeouts when unmounting.
-    useEffect(() => {
-        const _timeout = timeout.current;
-        return () => clearTimeout(_timeout);
-    }, []);
+    useEffect(() => () => clearTimeout(timeout.curren), []);
 
     return useCallback((...args) => {
         clearTimeout(timeout.current);

src/hooks/useDebounce/useDebounce.test.js

@@ -18,18 +18,6 @@ const Elem = () => {
 };
 
 describe('useDebounce()', () => {
-    let spy;
-    beforeEach(() => {
-        spy = sinon.spy(global, 'clearTimeout')
-    });
-    afterEach(() => {
-        spy.resetHistory();
-        spy.restore();
-    });
-    after(() => {
-        spy.restore();
-    });
-
     it('Should delay calls', async () => {
         let wrapper = null;
         act(() => {wrapper = mount(<Elem/>)});
@@ -52,8 +40,10 @@ describe('useDebounce()', () => {
     });
     it('Should cleanup', async () => {
         let wrapper = null;
+        const spy = sinon.spy(global, 'clearTimeout');
         act(() => {wrapper = mount(<Elem/>)});
         act(() => {wrapper.unmount()});
         expect(spy.callCount).to.eql(1);
+        spy.restore();
     });
 });

src/hooks/useThrottle/useThrottle.js

@@ -20,12 +20,7 @@ export default (callback, threshold) => {
     const wait = useRef(false);
     const timeout = useRef(-1);
 
-    useEffect(() => {
-        const _timeout = timeout.current;
-        return () => {
-            clearTimeout(_timeout);
-        }
-    }, []); // No need for deps here since 'timeout' is mutated
+    useEffect(() => () => clearTimeout(timeout.current), []); // No need for deps here since 'timeout' is mutated
 
     return useCallback((...args) => {
         if (!wait.current) {

src/hooks/useThrottle/useThrottle.test.js

@@ -19,18 +19,6 @@ const Elem = () => {
 };
 
 describe('useThrottle()', () => {
-    let spy;
-    beforeEach(() => {
-        spy = sinon.spy(global, 'clearTimeout')
-    });
-    afterEach(() => {
-        spy.resetHistory();
-        spy.restore();
-    });
-    after(() => {
-        spy.restore();
-    });
-
     it('Should delay calls', async () => {
         let wrapper = null;
         act(() => {wrapper = mount(<Elem/>)});
@@ -53,8 +41,10 @@ describe('useThrottle()', () => {
     });
     it('Should cleanup', async () => {
         let wrapper = null;
+        const spy = sinon.spy(global, 'clearTimeout');
         act(() => {wrapper = mount(<Elem/>)});
         act(() => {wrapper.unmount()});
         expect(spy.callCount).to.eql(1);
+        spy.restore();
     });
 });