fix(tests): use jest.mock for react-intersection-observer

ui/src/Hooks/useFlashTransition.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook, act } from "@testing-library/react-hooks";
 
-import { useInView } from "__mocks__/react-intersection-observer";
+import { useInView } from "react-intersection-observer";
 
 import { useFlashTransition, defaultProps } from "./useFlashTransition";
 
@@ -9,12 +9,11 @@ describe("useFlashTransition", () => {
     jest.useFakeTimers();
   });
 
-  afterEach(() => {
-    useInView.setInView(true);
-  });
-
   it("does nothing when value changes but element is out of viewport", () => {
-    useInView.setInView(false);
+    (useInView as jest.MockedFunction<typeof useInView>).mockReturnValue([
+      jest.fn(),
+      false,
+    ] as any);
 
     let value = 0;
     const { result, rerender } = renderHook(() => useFlashTransition(value));
@@ -26,10 +25,14 @@ describe("useFlashTransition", () => {
   });
 
   it("flashes when value changes and element is in viewport", () => {
-    useInView.setInView(true);
+    (useInView as jest.MockedFunction<typeof useInView>).mockReturnValue([
+      jest.fn(),
+      true,
+    ] as any);
 
     let value = 2;
     const { result, rerender } = renderHook(() => useFlashTransition(value));
+    expect(result.current.props).toMatchObject(defaultProps);
 
     value = 3;
     rerender();
@@ -41,7 +44,10 @@ describe("useFlashTransition", () => {
   });
 
   it("flashes when value changes and element moves into viewport", () => {
-    useInView.setInView(false);
+    (useInView as jest.MockedFunction<typeof useInView>).mockReturnValue([
+      jest.fn(),
+      false,
+    ] as any);
 
     let value = 2;
     const { result, rerender } = renderHook(() => useFlashTransition(value));
@@ -50,7 +56,12 @@ describe("useFlashTransition", () => {
     rerender();
     expect(result.current.props).toMatchObject(defaultProps);
 
-    act(() => useInView.setInView(true));
+    act(() => {
+      (useInView as jest.MockedFunction<typeof useInView>).mockReturnValue([
+        jest.fn(),
+        true,
+      ] as any);
+    });
     rerender();
     expect(result.current.props).toMatchObject({
       ...defaultProps,
@@ -60,7 +71,10 @@ describe("useFlashTransition", () => {
   });
 
   it("stops flashing props.onEntered is called", () => {
-    useInView.setInView(true);
+    (useInView as jest.MockedFunction<typeof useInView>).mockReturnValue([
+      jest.fn(),
+      true,
+    ] as any);
 
     let value = 2;
     const { result, rerender } = renderHook(() => useFlashTransition(value));
@@ -78,14 +92,20 @@ describe("useFlashTransition", () => {
   });
 
   it("unmounts cleanly when not flashing", () => {
-    useInView.setInView(false);
+    (useInView as jest.MockedFunction<typeof useInView>).mockReturnValue([
+      jest.fn(),
+      false,
+    ] as any);
 
     const { unmount } = renderHook(() => useFlashTransition(4));
     unmount();
   });
 
   it("unmounts cleanly when flashing", () => {
-    useInView.setInView(false);
+    (useInView as jest.MockedFunction<typeof useInView>).mockReturnValue([
+      jest.fn(),
+      false,
+    ] as any);
 
     let value = 5;
     const { rerender, unmount } = renderHook(() => useFlashTransition(value));

ui/src/Stores/AlertStore.test.ts

@@ -60,9 +60,7 @@ describe("AlertStore.data", () => {
       store.data.getClusterAlertmanagersWithoutReadOnly("default")
     ).toEqual(["default"]);
   });
-});
 
-describe("AlertStore.data", () => {
   it("getClusterAlertmanagersWithoutReadOnly handles clusters with no writable instances", () => {
     const store = new AlertStore([]);
     store.data.setUpstreams({
@@ -276,17 +274,6 @@ describe("AlertStore.filters", () => {
     );
   });
 
-  it("addFilter() updates window.history", () => {
-    const store = new AlertStore([]);
-    const historyMock = jest.spyOn(global.window.history, "pushState");
-    store.filters.addFilter("foo");
-    expect(historyMock).toHaveBeenLastCalledWith(
-      null,
-      "",
-      "http://localhost/?q=foo"
-    );
-  });
-
   it("setFilters() updates window.history", () => {
     const store = new AlertStore([]);
     store.filters.addFilter("foo");

ui/src/__mocks__/react-intersection-observer.ts

@@ -1,16 +0,0 @@
-import { useRef } from "react";
-
-const mock = {
-  value: true,
-};
-
-const useInView = () => {
-  const ref = useRef(null);
-  return [ref, mock.value];
-};
-
-useInView.setInView = (val: boolean) => {
-  mock.value = val;
-};
-
-export { useInView };

ui/src/setupTests.ts

@@ -1,7 +1,10 @@
 import React from "react";
+
 import Enzyme from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 
+import { useInView } from "react-intersection-observer";
+
 import { FetchRetryConfig } from "Common/Fetch";
 
 import { useFetchGetMock } from "__fixtures__/useFetchGet";
@@ -9,6 +12,8 @@ import { useFetchGet } from "Hooks/useFetchGet";
 
 jest.mock("Hooks/useFetchGet");
 
+jest.mock("react-intersection-observer");
+
 // https://github.com/airbnb/enzyme
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -44,4 +49,10 @@ beforeEach(() => {
   (useFetchGet as jest.MockedFunction<
     typeof useFetchGetMock
   >).mockImplementation(useFetchGetMock);
+
+  (useInView as jest.MockedFunction<typeof useInView>).mockReturnValue([
+    jest.fn(),
+    true,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ] as any);
 });