get most jsx tests passing

jsx/src/components/Groups/Groups.test.js

@@ -5,6 +5,7 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import { Provider, useDispatch, useSelector } from "react-redux";
 import { createStore } from "redux";
 import { HashRouter } from "react-router-dom";
+import { CompatRouter, useSearchParams } from "react-router-dom-v5-compat";
 // eslint-disable-next-line
 import regeneratorRuntime from "regenerator-runtime";
 
@@ -16,13 +17,20 @@ jest.mock("react-redux", () => ({
   useSelector: jest.fn(),
 }));
 
+jest.mock("react-router-dom-v5-compat", () => ({
+  ...jest.requireActual("react-router-dom-v5-compat"),
+  useSearchParams: jest.fn(),
+}));
+
 var mockAsync = () =>
   jest.fn().mockImplementation(() => Promise.resolve({ key: "value" }));
 
 var groupsJsx = (callbackSpy) => (
   <Provider store={createStore(mockReducers, mockAppState())}>
     <HashRouter>
-      <Groups location={{ search: "0" }} updateGroups={callbackSpy} />
+      <CompatRouter>
+        <Groups location={{ search: "0" }} updateGroups={callbackSpy} />
+      </CompatRouter>
     </HashRouter>
   </Provider>
 );
@@ -50,11 +58,6 @@ var mockAppState = () =>
       offset: 0,
       limit: 2,
       total: 4,
-      next: {
-        offset: 2,
-        limit: 2,
-        url: "http://localhost:8000/hub/api/groups?offset=2&limit=2",
-      },
     },
   });
 
@@ -62,11 +65,15 @@ beforeEach(() => {
   useSelector.mockImplementation((callback) => {
     return callback(mockAppState());
   });
+  useSearchParams.mockImplementation(() => {
+    return [new URLSearchParams(), jest.fn()];
+  });
 });
 
 afterEach(() => {
   useSelector.mockClear();
   mockReducers.mockClear();
+  useSearchParams.mockClear();
 });
 
 test("Renders", async () => {
@@ -109,13 +116,23 @@ test("Renders nothing if required data is not available", async () => {
 });
 
 test("Interacting with PaginationFooter causes state update and refresh via useEffect call", async () => {
-  let callbackSpy = mockAsync();
-
+  let upgradeGroupsSpy = mockAsync();
+  let setSearchParamsSpy = mockAsync();
+  let searchParams = new URLSearchParams({ limit: "2" });
+  useSearchParams.mockImplementation(() => [
+    searchParams,
+    (callback) => {
+      searchParams = callback(searchParams);
+      setSearchParamsSpy(searchParams.toString());
+    },
+  ]);
+  let _, setSearchParams;
   await act(async () => {
-    render(groupsJsx(callbackSpy));
+    render(groupsJsx(upgradeGroupsSpy));
+    [_, setSearchParams] = useSearchParams();
   });
 
-  expect(callbackSpy).toBeCalledWith(0, 2);
+  expect(upgradeGroupsSpy).toBeCalledWith(0, 2);
 
   var lastState =
     mockReducers.mock.results[mockReducers.mock.results.length - 1].value;
@@ -123,12 +140,10 @@ test("Interacting with PaginationFooter causes state update and refresh via useE
   expect(lastState.groups_page.limit).toEqual(2);
 
   let next = screen.getByTestId("paginate-next");
-  fireEvent.click(next);
-
-  lastState =
-    mockReducers.mock.results[mockReducers.mock.results.length - 1].value;
-  expect(lastState.groups_page.offset).toEqual(2);
-  expect(lastState.groups_page.limit).toEqual(2);
+  await act(async () => {
+    fireEvent.click(next);
+  });
+  expect(setSearchParamsSpy).toBeCalledWith("limit=2&offset=2");
 
   // FIXME: mocked useSelector, state seem to prevent updateGroups from being called
   // making the test environment not representative