Mocking useHistory and expect toBeCalledWith - reactjs

Question

I wan't to check if history.push() has been called with the correct parameters in my test.
I'm not sure what's the correct way to mock useHistory()
I tried this solution. But it seems that I can't check if push() has been called.
App.tsx
import React from 'react';
import {useHistory} from 'react-router-dom';
const App: React.FC = () => {
const history = useHistory();
const onClick = () => {
history.push('/anotherPath');
};
return (
<div>
<button onClick={onClick}>click</button>
</div>
);
};
export default App;
App.test.tsx
import React from 'react';
import {render, fireEvent} from '#testing-library/react';
import App from './App';
import {useHistory} from 'react-router-dom'
jest.mock('react-router-dom', () => ({
useHistory: () => ({
push: jest.fn(),
}),
}));
test('renders learn react link', async () => {
const app = render(<App/>);
fireEvent.click(app.getByText('click'));
expect(useHistory().push).toBeCalledWith('/anotherPath');
});
Is there any way to make sure that history.push() has been called with the correct parameters?

Answer 1

Try this, assign the mocked push method into a variable and use that to assert if it is called with the right parameters.
import React from "react";
import { render, fireEvent } from "#testing-library/react";
import { useHistory } from "react-router-dom";
const mockHistoryPush = jest.fn();
const App: React.FC = () => {
const history = useHistory();
const onClick = () => {
history.push("/anotherPath");
};
return (
<div>
<button onClick={onClick}>click</button>
</div>
);
};
jest.mock("react-router-dom", () => ({
useHistory: () => ({
push: mockHistoryPush
})
}));
test("renders learn react link", async () => {
const { getByText } = render(<App />);
fireEvent.click(getByText("click"));
expect(mockHistoryPush).toBeCalledWith("/anotherPath");
});