Update dependency react-router-dom to v7 (#140)

* Update dependency react-router-dom to v7
* Upgrade from react-router-dom to react-router.
* Update lock file with latest versions.
* Resolve issues with the tests after the react router upgrade.

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Gerben Jongerius <g.jongerius@jong-soft.com>

Author: renovate[bot]

package.json

@@ -17,20 +17,21 @@
     "react-datepicker": "^7.5.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.53.1",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.1.1",
     "react-scripts": "5.0.1",
     "spacetime": "^7.6.2"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.3.0",
-    "@testing-library/dom": "^10.2.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.0.0",
+    "@types/react": "^19.0.2",
     "eslint": "^9.14.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prop-types": "^15.8.1",
     "sass": "^1.83.0",
     "tailwindcss": "^3.4.14",

src/components/account/liability-row.component.tsx

@@ -1,6 +1,6 @@
 import { mdiDotsVertical, mdiSquareEditOutline, mdiTrashCanOutline } from "@mdi/js";
 import React, { Attributes } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import ImageAttachment from "../../core/attachment/image-attachment";
 import AccountRepository from "../../core/repositories/account-repository";
 import { Account } from "../../types/types";

src/components/account/own-row.component.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { mdiDotsVertical, mdiSquareEditOutline, mdiTrashCanOutline } from "@mdi/js";
 import React from "react";
 import AccountRepository from "../../core/repositories/account-repository";

src/components/account/reconcile/reconcile-row.component.spec.tsx

@@ -1,21 +1,21 @@
-import { render, fireEvent, waitFor, act } from '@testing-library/react';
+import {act, fireEvent, render, waitFor} from '@testing-library/react';
 import React from "react";
 import ReconcileRowComponent from './reconcile-row.component';
 import ProcessRepository, {
     ProcessInstance,
-    ProcessVariable,
-    ProcessTask
+    ProcessTask,
+    ProcessVariable
 } from "../../../core/repositories/process.repository";
-import { routerWrapped } from "../../../setupTests";
+import {BrowserRouter} from "react-router";
 
 jest.mock("../../../core/repositories/process.repository");
 
 function tableWrapped(children: any) {
-    return routerWrapped(<table>
+    return <BrowserRouter><table>
         <tbody>
-        { children }
+        {children}
         </tbody>
-    </table>)
+    </table></BrowserRouter>
 }
 
 describe('ReconcileRowComponent', () => {
@@ -46,7 +46,7 @@ describe('ReconcileRowComponent', () => {
 
     it('should load process variables on mount', async () => {
         jest.spyOn(ProcessRepository, 'variables').mockResolvedValue(Promise.resolve(mockVariables));
-        render(tableWrapped(<ReconcileRowComponent process={ mockProcess } onRemoved={ mockOnRemoved }/>));
+        render(tableWrapped(<ReconcileRowComponent process={mockProcess} onRemoved={mockOnRemoved}/>));
 
         await waitFor(() => expect(ProcessRepository.variables).toHaveBeenCalledWith('AccountReconcile', mockProcess.businessKey, mockProcess.id));
     });
@@ -56,11 +56,11 @@ describe('ReconcileRowComponent', () => {
         jest.spyOn(ProcessRepository, 'completeTask').mockResolvedValue(Promise.resolve());
         jest.spyOn(ProcessRepository, 'variables').mockResolvedValue(Promise.resolve(mockVariables));
 
-        const { getByTestId } = render(routerWrapped(<ReconcileRowComponent process={ mockProcess }
+        const { getByTestId } = render(tableWrapped(<ReconcileRowComponent process={ mockProcess }
                                                                             onRemoved={ mockOnRemoved }/>));
         await waitFor(() => expect(ProcessRepository.variables).toHaveBeenCalledWith('AccountReconcile', mockProcess.businessKey, mockProcess.id));
 
-        const retryButton = getByTestId(`retry-button-${ mockProcess.id }`);
+        const retryButton = getByTestId(`retry-button-${mockProcess.id}`);
 
         act(() => {
             fireEvent.click(retryButton);
@@ -73,14 +73,14 @@ describe('ReconcileRowComponent', () => {
         jest.spyOn(ProcessRepository, 'variables').mockResolvedValue(Promise.resolve(mockVariables));
         jest.spyOn(ProcessRepository, 'delete').mockResolvedValue(Promise.resolve());
 
-        const { getByTestId } = render(tableWrapped(<ReconcileRowComponent process={ mockProcess }
-                                                                           onRemoved={ mockOnRemoved }/>));
-        await waitFor(() => expect(getByTestId(`remove-row-${ mockProcess.id }`)).toBeInTheDocument());
+        const {getByTestId} = render(tableWrapped(<ReconcileRowComponent process={mockProcess}
+                                                                         onRemoved={mockOnRemoved}/>));
+        await waitFor(() => expect(getByTestId(`remove-row-${mockProcess.id}`)).toBeInTheDocument());
 
         expect(ProcessRepository.delete).not.toHaveBeenCalled();
         expect(ProcessRepository.variables).toHaveBeenCalledWith('AccountReconcile', mockProcess.businessKey, mockProcess.id);
 
-        const deleteButton = getByTestId(`remove-row-${ mockProcess.id }`);
+        const deleteButton = getByTestId(`remove-row-${mockProcess.id}`);
         act(() => {
             fireEvent.click(deleteButton);
         });

src/components/account/reconcile/reconcile-start.component.spec.tsx

@@ -1,9 +1,9 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import ProcessRepository from "../../../core/repositories/process.repository";
 import NotificationService from "../../../service/notification.service";
-import { routerWrapped } from "../../../setupTests";
 import ReconcilePopup from "./reconcile-start.component";
 import { Account } from "../../../types/types";
+import {BrowserRouter} from "react-router";
 
 jest.mock("../../../core/repositories/process.repository");
 jest.mock("../../../core");
@@ -20,8 +20,7 @@ describe('ReconcilePopup', () => {
         ProcessRepository.start = jest.fn().mockResolvedValue({});
         NotificationService.success = jest.fn();
 
-        const { getByTestId } = render(
-            routerWrapped(<ReconcilePopup account={ mockAccount } afterCreate={ mockAfterCreate }/>));
+        const { getByTestId } = render(<ReconcilePopup account={ mockAccount } afterCreate={ mockAfterCreate }/>, {wrapper: BrowserRouter});
 
         fireEvent.click(getByTestId(`reconcile-open-button-${ mockAccount.id }`));
 

src/components/breadcrumb/breadcrumb-item.component.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import Translation from "../localization/translation.component";
 

src/components/contract/contract-table/row.component.tsx

@@ -1,6 +1,6 @@
 import { Contract } from "../../../types/types";
 import { FC } from "react";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 import { Attachment, Resolver } from "../../../core";
 import { mdiCalendarCheck, mdiDotsVertical, mdiSquareEditOutline, mdiTrashCanOutline } from "@mdi/js";
 import ContractRepository from "../../../core/repositories/contract-repository";

src/components/contract/upload-dialog.component.spec.js

@@ -2,8 +2,8 @@ import user from '@testing-library/user-event';
 import axios from "axios";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 
-import { routerWrapped } from "../../setupTests";
 import UploadContract from "./upload-dialog.component";
+import {BrowserRouter} from "react-router";
 
 describe('upload-contract', () => {
 
@@ -14,7 +14,7 @@ describe('upload-contract', () => {
     })
 
     it('open upload contract', async () => {
-        const { getByTestId } = render(routerWrapped(<UploadContract id={1}/>))
+        const { getByTestId } = render(<UploadContract id={1}/>, {wrapper: BrowserRouter})
         const button = getByTestId('upload-button')
 
         expect(button).toBeInTheDocument()
@@ -27,7 +27,7 @@ describe('upload-contract', () => {
     })
 
     it('should upload a contract', async () => {
-        const { container, getByTestId } = render(routerWrapped(<UploadContract id={1}/>))
+        const { container, getByTestId } = render(<UploadContract id={1}/>, {wrapper: BrowserRouter})
 
         const openButton = getByTestId('upload-button')
         fireEvent.click(openButton)

src/components/form/entity/AccountInput.spec.tsx

@@ -1,7 +1,13 @@
 import { AccountTypeInput } from "./AccountTypeInput";
-import { formWrapped } from "../../../setupTests";
 import { render, waitFor } from "@testing-library/react";
 import axios from "axios";
+import {Form} from "../Form";
+
+const formWrapped = (component) => {
+    return <Form entity='TestForm' onSubmit={_ => undefined}>
+        {component}
+    </Form>
+}
 
 describe('AccountTypeInput', () => {