Update to React 17 (#3388)

* Update to React 17 Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com> * Run prettier Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com>
vmware-tanzu · Sep 10, 2021 · 3bb99b1 · 3bb99b1
1 parent 2584b40
commit 3bb99b1
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 100 deletions.
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -13,7 +13,6 @@
     "ajv": "^8.6.2",
     "axios": "^0.21.4",
     "connected-react-router": "^6.9.1",
-    "enzyme-adapter-react-16": "^1.15.6",
     "fast-json-patch": "^3.1.0",
     "fstream": "^1.0.12",
     "google-protobuf": "^3.17.3",
@@ -28,12 +27,12 @@
     "protobufjs": "^6.11.2",
     "qs": "^6.10.1",
     "raf": "^3.4.1",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-ace": "^9.4.3",
     "react-compound-slider": "^3.3.1",
     "react-copy-to-clipboard": "^5.0.4",
     "react-diff-viewer": "^3.1.1",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-intl": "^5.20.10",
     "react-jsonschema-form": "^1.8.1",
@@ -44,7 +43,7 @@
     "react-router-hash-link": "^2.4.3",
     "react-switch": "^6.0.0",
     "react-tabs": "^3.2.2",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^17.0.2",
     "react-tooltip": "^4.2.21",
     "react-transition-group": "^4.4.2",
     "redux": "^4.1.1",
@@ -114,6 +113,7 @@
     "@types/react-transition-group": "^4.4.2",
     "@types/redux-mock-store": "^1.0.3",
     "@types/swagger-ui-react": "^3.35.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "enzyme": "^3.11.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.4.0",

diff --git a/dashboard/src/components/js/hooks/useOutsideClick/useOutsideClick.js b/dashboard/src/components/js/hooks/useOutsideClick/useOutsideClick.js
@@ -25,7 +25,7 @@ const useOutsideClick = (callback, refs, enabled = true) => {
 
   useEffect(() => {
     if (enabled) {
-      document.addEventListener("mousedown", memoizeClick);
+      document.addEventListener("mousedown", memoizeClick, { capture: true });
     }
     return () => document.removeEventListener("mousedown", memoizeClick);
   }, [memoizeClick, enabled]);

diff --git a/dashboard/src/components/js/hooks/useOutsideClick/useOutsideClick.test.js b/dashboard/src/components/js/hooks/useOutsideClick/useOutsideClick.test.js
@@ -30,21 +30,27 @@ describe(useOutsideClick, () => {
   it("should attach the event to the global event listener", () => {
     // Mock addEventListener
     const listeners = {};
-    document.addEventListener = jest.fn((event, cb) => {
-      listeners[event] = cb;
-    });
+    document.addEventListener = jest.fn(
+      (event, cb) => {
+        listeners[event] = cb;
+      },
+      { capture: true },
+    );
 
     mount(<TestComponent />);
-    expect(Object.keys(listeners).length).toBe(1);
+    expect(Object.keys(listeners).length).toBe(2);
     expect(listeners["mousedown"]).toBeDefined();
   });
 
   it("should attach the event only when enabled is true", async () => {
     // Mock addEventListener
     const listeners = {};
-    document.addEventListener = jest.fn((event, cb) => {
-      listeners[event] = cb;
-    });
+    document.addEventListener = jest.fn(
+      (event, cb) => {
+        listeners[event] = cb;
+      },
+      { capture: true },
+    );
 
     const wrapper = mount(<TestComponent enabled={false} />);
     expect(Object.keys(listeners).length).toBe(0);

diff --git a/dashboard/src/setupTests.ts b/dashboard/src/setupTests.ts
@@ -1,10 +1,11 @@
-import { configure } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
+import Enzyme from "enzyme";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+
 import "jest-enzyme";
 import { WebSocket } from "mock-socket";
 import "raf/polyfill"; // polyfill for requestAnimationFrame
 
-configure({ adapter: new Adapter() });
+Enzyme.configure({ adapter: new Adapter() });
 
 // Mock browser specific APIs like localstorage or Websocket
 jest.spyOn(window.localStorage.__proto__, "clear");