Unable to test a component with useLocation hook - reactjs

Question

I have a Headercomponent as follows:
const Header = () => {
const data = useDataContext().header;
return <div data-testid="header" className="w-full h-[80px] bg-white">
<div className="h-1 bg-green-400 w-full"/>
<div className="flex items-center w-full h-[80px] shadow-sm">
<div className="flex items-center flex-1 h-full">
<Navigation applications={data.apps}/>
</div>
<div className="flex items-center pl-4 h-full">
<Account />
</div>
</div>
</div>
}
The Navigation component is as follows:
import React, {useState} from 'react';
import {App} from "../../../../interfaces/interfaces";
import {map, find, filter} from "lodash";
import NavigationItem from "./NavigationItem";
import { useLocation, useNavigate } from 'react-router-dom';
interface NavigationProps {
applications: App[]
}
const Navigation:React.FC<NavigationProps> = ({applications}: NavigationProps) => {
const [expanded, setExpanded] = useState<boolean>(false)
const location = useLocation();
const navigate = useNavigate();
const activeApplication = find(applications, application => application.url === location.pathname);
const inactiveApplications = filter(applications, application => application.url !== location.pathname)
return (
<div className="flex h-full">
<div className="z-[2]">
<NavigationItem application={activeApplication}
handleClick={() => setExpanded(expanded => !expanded)}
expanded={expanded}
/>
</div>
<div className={`flex transform transition transition-transform ${expanded ? 'translate-x-0' : '-translate-x-full'}`}>
{map(inactiveApplications, application => {
return <NavigationItem application={application}
handleClick={() => {
setExpanded(false);
navigate(application.url);
}}
/>
})}
</div>
</div>
);
};
export default Navigation;
Thus the Navigation component uses the useLocation hook from react-router-dom.
I want to write some tests for Header component and the header.test.tsx is as follows:
import Header from "./Header";
import {MemoryRouter} from "react-router-dom";
import {describe, it} from "#jest/globals";
import {render, screen} from "#testing-library/react";
describe("<Header/>", () => {
it("renders the header component with Home link", () => {
render(<MemoryRouter initialEntries={["/home"]}>
<Header/>
</MemoryRouter>);
const textElement = screen.getByText(/Home/i);
expect(textElement).toBeInTheDocument();
const headerElement = screen.getByTestId("header");
expect(headerElement).toBeInTheDocument()
// expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.test.com');
});
});
Thus I wrap the header component with MemoryRouter but it still gives me an error as follows:
useLocation() may be used only in the context of a <Router> component.
What do I do wrong?
Thanks in advance.

Answer 1

Your render should look like this
render(
<MemoryRouter initialEntries={["/home"]}>
<Routes>
<Route path="/home" element={<Header/>} />
</Routes>
</MemoryRouter>
)