Jest mock function not being called

Question

My component code is as below. Not an expert in Jest mocking. referred How to mock useHistory hook in jest? and mocked useHistory.push. But the mock function is not being hit. I would appreciate any suggestions

const ReviseAction = ({
  plans,
  template,
  coveragePercentage,
  territoryName,
  existingTemplateId,
}) => {
  const history = useHistory();

  const handleRevise = () => {
    history.push({
      pathname: "/xxx",
      state: {
        plans: plans,
        template: template,
        coveragePercentage: coveragePercentage,
        territoryName: territoryName,
        existingTemplateId: existingTemplateId,
      },
    });
  };

  return (
    <button
      data-testid="revise-button"
      onClick={handleRevise}
      key="revise-button"
    >
      Revise
    </button>
  );
};

Here is my test:

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import ReviseAction from "./ReviseAction";
import { HashRouter as Router } from "react-router-dom";

describe("ReviseAction", () => {

    jest.mock("react-router-dom");

    const pushMock = jest.fn();
    //reactRouterDom.useHistory = jest.fn().mockReturnValue({push: pushMock});

    jest.mock("react-router-dom", () => ({
        ...jest.requireActual("react-router-dom"),
            useHistory: () => ({
                push: jest.fn()
            })
        }));

    it("Renders component", async () => {
        render(
            <Router>
                <ReviseAction 
                    plans={[]}
                    template={{}}
                    coveragePercentage={"12"}
                    territoryName={"Name"}
                    existingTemplateId={"1234"}
                />
            </Router>
        );

        fireEvent.click(screen.queryByTestId("revise-button"));
        expect(pushMock).toHaveBeenCalled();
    });
});

and getting

Expected number of calls: >= 1
Received number of calls:    0

Answer 1

This fixed it. What I did: Changed HashRouter import to router passed the mock history as props to router.

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import ReviseAction from "./ReviseAction";
import { Router } from "react-router-dom";

describe("ReviseAction", () => {

    const mockPush = jest.fn();
    jest.mock("react-router-dom", () => ({
        useHistory: () => ({
            push: mockPush,
        }),
    }));
    const mockHistory = { push: mockPush, location: {}, listen: jest.fn() };
    it("Renders component", async () => {
        render(
            <Router history={mockHistory}>
                <ReviseAction 
                    plans={[]}
                    template={{}}
                    coveragePercentage={"12"}
                    territoryName={"Name"}
                    existingTemplateId={"1234"}
                />
            </Router>
        );

        fireEvent.click(screen.queryByTestId("revise-button"));
        expect(mockPush).toHaveBeenCalled();
    });
});