在 jest React.js 中编写单元测试时如何将函数传递给自定义钩子

Question

I am facing problem like i have to write a unit test of a custom hook used in index.js see this implementation in which i am passing a function as a parameter. So i don't know how to pass a function to a hook in unit test. I am a new bie. I need a urgent help to achieve a 100% coverage for my unit test.

useBrowserFwdBackButton.ts (File in which custom hook is available)

import React from 'react';
    
    const useBrowserFwdBackButton = (fn: any) => {
      const cb = React.useRef(fn); // init with fn, so that type checkers won't assume that current might be undefined
    
      React.useEffect(() => {
        cb.current = fn;
      }, [fn]);
    
      React.useEffect(() => {
        const onForwardBackButtonEvent = (...args: any[]) => cb.current?.(...args);
    
        window.addEventListener('popstate', onForwardBackButtonEvent);
    
        return () => window.removeEventListener('popstate', onForwardBackButtonEvent);
      }, []);
    };
    
    export default useBrowserFwdBackButton;

index.js (from where hook is calling from functional component)

useBrowserFwdBackButton((e) => {
    e.preventDefault();
    if (attachmentListLength !== 0) {
      dispatch(deleteGoogleDocument(attachmentList));
    }
  });

Answer 1

Assuming you are using jest and @testing-library/react-hooks for hook testing

you can creat mock function with jest.fn() eg.

const mockFunction = jest.fn();
const { result } = renderHook(() => useBrowserFwdBackButton(mockFunction));
const { .... } = result.current;

// since it's attached to windows event, you need to trigger the "popstate" event

// expects here
expect(mockFunction).toBeCalledTimes(1);

additional info (trigger window event) How to trigger a window event during unit testing using vue-test-utils