I build an App with Vite, React, Redux, Redux-Tool-Kit and Javascript that also involves routing and Vitest for testing.

I have to build a mock of the useNavigate( ) Hook but i cannot make it work. This is what I build:

import React from 'react';
import { renderWithProviders } from '../../../../tests_setup/test-utils';
import { screen, fireEvent  } from '@testing-library/dom';
import { useNavigate } from 'react-router-dom';
import SearchInput from '../SearchInput';
import { resetSearch, updateSearchterm, getData } from '../../../features/data/dataSlice';

// Mock the useNavigate function from react-router-dom
const mockUseNavigate = vi.fn();

vi.mock('react-router-dom', async () => {
    const nav = await vi.importActual<typeof import("react-router-dom")>("react-router-dom");
    return {
        ...nav,
        useNavigate: () => mockUseNavigate,
    };
}); 

This is my test-utils.jsx file:

import React from 'react'
import { render } from '@testing-library/react'
import { Provider } from 'react-redux'
import { BrowserRouter as Router } from 'react-router-dom';
import { setupStore } from '../src/app/store'

export function renderWithProviders(
  ui,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = setupStore(preloadedState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return (
        <Provider store={store}>
            <Router>
                {children}
            </Router>
        </Provider>
    )
  }
  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) }
};

I am getting the following error-message from Vitest:

Error: [vitest] No "BrowserRouter" export is defined on the "react-router-dom" mock. Did you forget to return it from "vi.mock"?
If you need to partially mock a module, you can use "importOriginal" helper inside:

vi.mock("react-router-dom", async (importOriginal) => {
  const actual = await importOriginal()
  return {
    ...actual,
    // your mocked methods
  }
})

 ❯ Wrapper tests_setup/test-utils.jsx:30:14
     28|     return (
     29|         <Provider store={store}>
     30|             <Router>
       |              ^
     31|                 {children}
     32|             </Router>
 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18
 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13
 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16
 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5
 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7

I googled so much, watched tutorials finaly ended up asking ChatGPT but I could not find a solution.

Can anyone please help? The whole testing topic is still quite confusing to me, so I would also be very happy about some explanations to get a better understanding.

Many thanks upfront!