reactjs - How to make event handler function mock in react and react testing library

Question

I would like to know how to make event handler function be mock in react and react testing library.

For example, in the following source code, when a button is clicked, a function handleClick is fired.

import * as React from 'react';
import { goToSecondPage } from './PageTransitionUtuil';

const IndexPage = () => {
  const handleClick = (e) => {
    console.log(e);
    goToSecondpage();
  };

  return (
     <button onClick={(e) => handleClick(e)} />
  )
}

I would like to know

• How to create a mock function in react testing library and jest.
• How to set the mock function into the dom event handler in a test case.

question from:https://stackoverflow.com/questions/65839831/how-to-make-event-handler-function-mock-in-react-and-react-testing-library

Answer 1

Do an import * as of your utility file that you can then mock individual functions of for testing.

import * as utils from "./PageTransitionUtil";

jest.mock("./PageTransitionUtil");

utils.goToSecondPage = jest.fn();

From here the goToSecondPage is a mock function that you can do assertions on, i.e. expect(utils.goToSecondPage).toHaveBeenCalled().