jest react-testing-library error symbol is not a function - reactjs

Question

Hello everyone i have problem with simple test i try test has text in Link tag and has link tag in nav but i see error symbol is not a function can you help me please?
my test code:
const mockUseLocationValue = {
pathname: "",
search: '',
hash: '',
state: null
}
jest.mock('react-router', () => ({
...jest.requireActual("react-router") as {},
useLocation: jest.fn().mockImplementation(() => {
return mockUseLocationValue;
})
}));
test("should render the home page", () => {
render(<Header />);
const navbar = screen.getByTestId("navbar");
const link = screen.getByTestId("home-link");
expect(link.innerHTML).toMatch("Home page");
expect(navbar).toContainElement(link);
});
My original code:
export const Header = ():JSX.Element => {
const location = useLocation()
const { pathname } = location
const splitLocation = pathname.split('/')
return (
<HeaderBlock as='h3' block>
<nav data-testid="navbar">
<ul className={styles.links}>
<li>
<Link data-testid="home-link" to="/">
Home Page
</Link>
</li>
</ul>
</nav>
</HeaderBlock>
)
}

Answer 1

When using react-testing-library you can specify additional options for the render function, one of them being a wrapper.
wrapper
Pass a React Component as the wrapper option to have it rendered
around the inner element. This is most useful for creating reusable
custom render functions for common data providers.
You shouldn't mock functionality you are testing.
Create a memory router for testing in jest.
import { MemoryRouter } from 'react-router-dom';
export const RouterWrapper = ({ children }) => (
<MemoryRouter>{children}</MemoryRouter>
);
In test, import the wrapper and pass in the options.
import { RouterWrapper } from '../path/to/test/util';
test("should render the home page", () => {
render(
<Header />,
{
wrapper: RouterWrapper
}
);
const navbar = screen.getByTestId("navbar");
const link = screen.getByTestId("home-link");
expect(link.innerHTML).toMatch("Home page");
expect(navbar).toContainElement(link);
});