How to pass function to a custom hook while writing unit test in Jest/React

Question

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. I don't know how to pass a function to a hook in unit test. I am a beginner.

How can I 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));
    }
  });

Why would you need to store a function in useRef? (or useState, etc) — Jared Smith
– Jared Smith, Commented Nov 3, 2021 at 13:19
Custom hook does not by itself imply storing a function in a ref. Please provide detail about why you need to store a function in a ref. Especially a ref you never change and don't return. — Jared Smith
– Jared Smith, Commented Nov 3, 2021 at 14:02
i am using this approach. for reference please see link. 30secondsofcode.org/react/s/use-unload — Muhammad Maaz Sheikh
– Muhammad Maaz Sheikh, Commented Nov 3, 2021 at 14:21
My apologies, that looks legit. In the future please include information like that in the question itself. — Jared Smith
– Jared Smith, Commented Nov 3, 2021 at 15:03

Yichz · Accepted Answer · 2021-11-03 17:40:21Z

0

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

answered Nov 3, 2021 at 17:40

Yichz

9,71110 gold badges60 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass function to a custom hook while writing unit test in Jest/React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related