How do you mock useLocation() pathname using shallow test enzyme Reactjs?

Question

I have header component like below:

import { useLocation } from "react-router-dom";  const Header = () => {    let route = useLocation().pathname;     return route === "/user" ? <ComponentA /> : <ComponentB />; } 

How will you mock this useLocation() to get the path as user?

I cant simply call the Header component as below in my test file as I am getting an error:

TypeError: Cannot read property 'location' of undefined at useLocation

describe("<Header/>", () => {     it("call the header component", () => {         const wrapper = shallow(<Header />);         expect(wrapper.find(ComponentA)).toHaveLength(1);     }); }); 

I have tried looking similar to the link How to test components using new react router hooks? but it didnt work.

I have tried like below:

const wrapper = shallow(       <Provider store={store}>         <MemoryRouter initialEntries={['/abc']}>           <Switch>             <AppRouter />           </Switch>         </MemoryRouter>       </Provider>,     );     jestExpect(wrapper.find(AppRouter)       .dive()       .find(Route)       .filter({path: '/abc'})       .renderProp('render', { history: mockedHistory})       .find(ContainerABC)     ).toHaveLength(1); 

from the link Testing react-router with Shallow rendering but it didnt work.

Please let me know.

Thanks in advance.

Answer 1

I found that I can mock the React Router hooks like useLocation using the following pattern:

import React from "react" import ExampleComponent from "./ExampleComponent" import { shallow } from "enzyme"  jest.mock("react-router-dom", () => ({   ...jest.requireActual("react-router-dom"),   useLocation: () => ({     pathname: "localhost:3000/example/path"   }) }));  describe("<ExampleComponent />", () => {   it("should render ExampleComponent", () => {     shallow(<ExampleComponent/>);   }); }); 

If you have a call to useLocation in your ExampleComponent the above pattern should allow you to shallow render the component in an Enzyme / Jest test without error. Hope that helps!