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', () => {
 

src/components/form/entity/AccountTypeInput.spec.js

@@ -1,35 +1,35 @@
 import { fireEvent, render } from '@testing-library/react';
 import ButtonComponent from './button.component';
-import { routerWrapped } from "../../../setupTests";
 import { mdiAbacus } from "@mdi/js";
+import {BrowserRouter} from "react-router";
 
 describe('Button', () => {
     const mockNavigate = jest.fn()
 
     beforeEach(() => {
-        jest.mock('react-router-dom', () => ({
-            ...jest.requireActual('react-router-dom'),
+        jest.mock('react-router', () => ({
+            ...jest.requireActual('react-router'),
             useNavigate: () => mockNavigate
         }))
     })
 
     it('renders with default props', () => {
-        const { getByTestId } = render(routerWrapped(<ButtonComponent dataTestId="button" />));
+        const { getByTestId } = render(<ButtonComponent dataTestId="button" />, {wrapper: BrowserRouter});
         const button = getByTestId('button');
         expect(button).toBeInTheDocument();
     });
 
     it('calls onClick when clicked', () => {
         const handleClick = jest.fn();
-        const { getByTestId } = render(routerWrapped(<ButtonComponent onClick={ handleClick } dataTestId="button" />));
+        const { getByTestId } = render(<ButtonComponent onClick={ handleClick } dataTestId="button" />, {wrapper: BrowserRouter});
         const button = getByTestId('button');
 
         fireEvent.click(button);
         expect(handleClick).toHaveBeenCalled();
     });
 
     it('navigates when href is provided and button is clicked', () => {
-        const { getByTestId } = render(routerWrapped(<ButtonComponent href="/test" dataTestId="button" />));
+        const { getByTestId } = render(<ButtonComponent href="/test" dataTestId="button" />, {wrapper: BrowserRouter});
         const button = getByTestId('button');
 
         fireEvent.click(button);
@@ -38,7 +38,7 @@ describe('Button', () => {
 
     it('does not navigate when onClick is provided', () => {
         const handleClick = jest.fn();
-        const { getByTestId } = render(routerWrapped(<ButtonComponent href="/test" onClick={ handleClick } dataTestId="button" />));
+        const { getByTestId } = render(<ButtonComponent href="/test" onClick={ handleClick } dataTestId="button" />, {wrapper: BrowserRouter});
         const button = getByTestId('button');
 
         fireEvent.click(button);
@@ -47,19 +47,19 @@ describe('Button', () => {
     });
 
     it('renders with icon before label when iconPos is before', () => {
-        const { getByTestId } = render(routerWrapped(<ButtonComponent icon={ mdiAbacus } iconPos="before" dataTestId="button" />));
+        const { getByTestId } = render(<ButtonComponent icon={ mdiAbacus } iconPos="before" dataTestId="button" />, {wrapper: BrowserRouter});
         const button = getByTestId('button');
         expect(button.firstChild.nodeName).toBe('svg');
     });
 
     it('renders with icon after label when iconPos is after', () => {
-        const { getByTestId } = render(routerWrapped(<ButtonComponent icon={ mdiAbacus } iconPos="after" dataTestId="button" />));
+        const { getByTestId } = render(<ButtonComponent icon={ mdiAbacus } iconPos="after" dataTestId="button" />, {wrapper: BrowserRouter});
         const button = getByTestId('button');
         expect(button.lastChild.nodeName).toBe('svg');
     });
 
     it('renders with disabled attribute when disabled prop is true', () => {
-        const { getByTestId } = render(routerWrapped(<ButtonComponent disabled={true} dataTestId="button" />));
+        const { getByTestId } = render(<ButtonComponent disabled={true} dataTestId="button" />, {wrapper: BrowserRouter});
         const button = getByTestId('button');
 
         expect(button).toBeDisabled();

src/components/layout/button/button.component.spec.js

@@ -1,9 +1,9 @@
-import { useNavigate } from "react-router-dom";
 import Icon from "@mdi/react";
 import React, { Attributes, FC } from "react";
 
 import Translation from "../../localization/translation.component";
 import { StyleVariant } from "../../../types/types";
+import { useNavigate } from "react-router";
 
 const specialVariant = ['icon', 'text']
 type SpecializedVariant = (typeof specialVariant)[number]

src/components/layout/button/button.component.tsx

@@ -1,22 +1,22 @@
 import HistoryButtonComponent from "./history-button.component"
 import { fireEvent, render } from "@testing-library/react";
-import { routerWrapped } from "../../../setupTests";
 import { mdiAccount } from "@mdi/js";
+import {BrowserRouter} from "react-router";
 
 describe(HistoryButtonComponent, () => {
 
     const mockNavigate = jest.fn()
 
     beforeEach(() => {
-        jest.mock('react-router-dom', () => ({
-            ...jest.requireActual('react-router-dom'),
+        jest.mock('react-router', () => ({
+            ...jest.requireActual('react-router'),
             useNavigate: () => mockNavigate
         }))
     })
 
     it("click on the back button", () => {
         const { getByRole } = render(
-            routerWrapped(<HistoryButtonComponent label='common.test' icon={mdiAccount}/>))
+            <HistoryButtonComponent label='common.test' icon={mdiAccount}/>, {wrapper: BrowserRouter})
         const button = getByRole('button')
 
         expect(button).toBeInTheDocument()

src/components/layout/button/history-button.component.spec.js

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import React, { Attributes, FC } from "react";
 import ButtonComponent from "./button.component";
 

src/components/layout/button/history-button.component.tsx

@@ -1,8 +1,8 @@
 import Card from "./card.component";
 import {render} from "@testing-library/react";
 import {Button} from "./button";
-import {routerWrapped} from "../../setupTests";
 import {mdiAccount} from "@mdi/js";
+import {BrowserRouter} from "react-router";
 
 describe('Card', () => {
     let button = <Button label='test.button' icon={mdiAccount} key='button'/>
@@ -18,7 +18,7 @@ describe('Card', () => {
     })
 
     it("A card with actions should have a header", () => {
-        const { container } = render(routerWrapped(<Card actions={[button]}><div/></Card>))
+        const { container } = render(<Card actions={[button]}><div/></Card>, {wrapper: BrowserRouter})
 
         const header = container.querySelector('header')
         expect(header).toBeInTheDocument()
@@ -28,7 +28,7 @@ describe('Card', () => {
     })
 
     it("A card with buttons should have a footer", () => {
-        const { container } = render(routerWrapped(<Card buttons={[button]}><div/></Card>))
+        const { container } = render(<Card buttons={[button]}><div/></Card>, {wrapper: BrowserRouter})
 
         const footer = container.querySelector('footer')
         expect(footer).toBeInTheDocument()

src/components/layout/card.component.spec.js

@@ -1,11 +1,12 @@
 import { render } from "@testing-library/react";
 import { Paginator } from "./paginator.component";
 import { routerWrapped } from "../../setupTests";
+import {BrowserRouter} from "react-router";
 
 describe('Paginator', () => {
 
     it("Paginator should have the correct number of pages", () => {
-        const { getByTestId, getAllByRole } = render(routerWrapped(<Paginator page={2} pageSize={10} records={100} />))
+        const { getByTestId, getAllByRole } = render(<Paginator page={2} pageSize={10} records={100} />, {wrapper: BrowserRouter})
 
         const previous = getByTestId('previous-button')
         const next = getByTestId('next-button')
@@ -19,13 +20,13 @@ describe('Paginator', () => {
     })
 
     it("Paginator last page disabled", () => {
-        const { getByTestId } = render(routerWrapped(<Paginator page={10} pageSize={10} records={100} />))
+        const { getByTestId } = render(<Paginator page={10} pageSize={10} records={100} />, {wrapper: BrowserRouter})
         const next = getByTestId('next-button')
         expect(next).toHaveClass('pointer-events-none')
     })
 
     it("Paginator first page disabled", () => {
-        const { getByTestId } = render(routerWrapped(<Paginator page={0} pageSize={10} records={100} />))
+        const { getByTestId } = render(<Paginator page={0} pageSize={10} records={100} />, {wrapper: BrowserRouter})
 
         const previous = getByTestId('previous-button')
         expect(previous).toHaveClass('pointer-events-none')

src/components/layout/paginator.component.spec.js

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import Icon from "@mdi/react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 type PageButtonProp = {
     page: number,