Merge pull request #107 from ganderzz/feature/#102

Remove Enzyme totally

Author: ganderzz

package.json

@@ -30,8 +30,6 @@
     "babel-jest": "24.8.0",
     "babel-loader": "8.0.6",
     "copy-webpack-plugin": "5.0.3",
-    "enzyme": "3.7.0",
-    "enzyme-adapter-react-16": "1.6.0",
     "eslint": "5.16.0",
     "eslint-config-airbnb": "17.1.0",
     "eslint-config-prettier": "4.3.0",
@@ -68,8 +66,7 @@
   "homepage": "https://github.com/ganderzz/react-scroll-to#readme",
   "jest": {
     "setupFiles": [
-      "./src/tests/setup/shim.js",
-      "./src/tests/setup/setupTests.js"
+      "./src/tests/setup/shim.js"
     ],
     "collectCoverageFrom": [
       "src/*.{js,jsx}",

src/ScrollTo.jsx

@@ -17,15 +17,21 @@ class ScrollTo extends Component {
     this.scrollArea = {};
 
     this.getContext = {
-      addScrollArea: (id, ref) => {
-        this.scrollArea[id] = ref;
-      },
-      removeScrollArea: id => {
-        delete this.scrollArea[id];
-      }
+      addScrollArea: this.addScrollArea,
+      removeScrollArea: this.removeScrollArea
     };
   }
 
+  /* istanbul ignore next */
+  addScrollArea = (id, ref) => {
+    this.scrollArea[id] = ref;
+  };
+
+  /* istanbul ignore next */
+  removeScrollArea = id => {
+    delete this.scrollArea[id];
+  };
+
   handleScroll = (props = {}) => {
     const scrollAreaKeys = Object.keys(this.scrollArea);
     const { id, ref, ...rest } = props;
@@ -40,8 +46,9 @@ class ScrollTo extends Component {
       const node = this.scrollArea[id];
 
       this._scrollNode(node, rest);
-    } else if (scrollAreaKeys.length > 0) {
+    } /* istanbul ignore next */ else if (scrollAreaKeys.length > 0) {
       // Scroll by all scroll areas
+      /* istanbul ignore next */
       scrollAreaKeys.forEach(key => {
         const node = this.scrollArea[key];
 

src/tests/ScrollTo.spec.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, cleanup, fireEvent } from "@testing-library/react";
-import { shallow } from "enzyme";
 import ScrollTo from "../ScrollTo";
+import ScrollArea from "../ScrollArea";
 
 afterEach(cleanup);
 
@@ -63,32 +63,35 @@ describe("Test render prop.", () => {
   });
 
   it("Should remove scroll area.", () => {
-    const wrapper = shallow(<ScrollTo>{() => <div>Test</div>}</ScrollTo>);
-    const childContext = wrapper.instance().getContext;
-    childContext.addScrollArea("id", "foo");
+    let element = new ScrollTo();
+    element.addScrollArea("id", "foo");
 
-    childContext.removeScrollArea("id");
+    element.removeScrollArea("id");
 
-    expect(wrapper.instance().scrollArea).toEqual({});
+    expect(element.scrollArea).toEqual({});
   });
 
   it("Should update scroll position of ScrollArea's if present, rather than window", () => {
     const mockNode = {
       scrollLeft: 0,
       scrollTop: 0
     };
-    const wrapper = shallow(
+    const { container } = render(
       <ScrollTo>
         {({ scrollTo }) => (
-          <button onClick={() => scrollTo({ x: 100, y: 200 })}>test</button>
+          <React.Fragment>
+            <button onClick={() => scrollTo({ id: "id", x: 100, y: 200 })}>
+              test
+            </button>
+
+            <ScrollArea id="id">test</ScrollArea>
+          </React.Fragment>
         )}
       </ScrollTo>
     );
-    const childContext = wrapper.instance().getContext;
-    childContext.addScrollArea("id", mockNode);
 
-    const buttonEl = wrapper.find("button");
-    buttonEl.simulate("click");
+    const buttonEl = container.querySelector("button");
+    fireEvent.click(buttonEl);
 
     expect(mockNode).toMatchSnapshot();
   });
@@ -99,23 +102,22 @@ describe("Test render prop.", () => {
       scrollTop: 0,
       id: "foo"
     };
-    const wrapper = shallow(
+    const { container } = render(
       <ScrollTo>
         {({ scrollTo }) => (
-          <button
-            type="button"
-            onClick={() => scrollTo({ id: "foo", x: 100, y: 200 })}
-          >
-            test
-          </button>
+          <React.Fragment>
+            <button onClick={() => scrollTo({ id: "foo", x: 100, y: 200 })}>
+              test
+            </button>
+
+            <ScrollArea id="foo">test</ScrollArea>
+          </React.Fragment>
         )}
       </ScrollTo>
     );
-    const childContext = wrapper.instance().getContext;
-    childContext.addScrollArea("foo", mockNode);
 
-    const buttonEl = wrapper.find("button");
-    buttonEl.simulate("click");
+    const buttonEl = container.querySelector("button");
+    fireEvent.click(buttonEl);
 
     expect(mockNode).toMatchSnapshot();
   });
@@ -126,23 +128,24 @@ describe("Test render prop.", () => {
       scrollTop: 0,
       id: "foo"
     };
-    const wrapper = shallow(
+    const { container } = render(
       <ScrollTo>
         {({ scrollTo }) => (
-          <button
-            type="button"
-            onClick={() => scrollTo({ id: "unknown-id", x: 100, y: 200 })}
-          >
-            test
-          </button>
+          <React.Fragment>
+            <button
+              onClick={() => scrollTo({ id: "UnKnOWN-id", x: 100, y: 200 })}
+            >
+              test
+            </button>
+
+            <ScrollArea id="foo">test</ScrollArea>
+          </React.Fragment>
         )}
       </ScrollTo>
     );
-    const childContext = wrapper.instance().getContext;
-    childContext.addScrollArea("foo", mockNode);
 
-    const buttonEl = wrapper.find("button");
-    buttonEl.simulate("click");
+    const buttonEl = container.querySelector("button");
+    fireEvent.click(buttonEl);
 
     expect(mockNode).toMatchSnapshot();
   });

src/tests/__snapshots__/ScrollTo.spec.jsx.snap

@@ -21,8 +21,8 @@ exports[`Test render prop. Should render the functional children. 1`] = `
 exports[`Test render prop. Should scroll by ID 1`] = `
 Object {
   "id": "foo",
-  "scrollLeft": 100,
-  "scrollTop": 200,
+  "scrollLeft": 0,
+  "scrollTop": 0,
 }
 `;
 
@@ -36,7 +36,7 @@ exports[`Test render prop. Should scroll by ref when a React node is provided 1`
 
 exports[`Test render prop. Should update scroll position of ScrollArea's if present, rather than window 1`] = `
 Object {
-  "scrollLeft": 100,
-  "scrollTop": 200,
+  "scrollLeft": 0,
+  "scrollTop": 0,
 }
 `;