使用 Jest 的 React.js 自定义钩子测试答案

【问题标题】：React.js custom hook testing using Jest使用 Jest 的 React.js 自定义钩子测试
【发布时间】：2021-06-15 11:41:29
【问题描述】：

我正在尝试使用 jest 函数测试自定义挂钩，但我不知道该怎么做。可以请帮助我如何为这个Custome钩子编写一些开玩笑的功能测试用例。

import React, { useEffect } from 'react'

const useOutsideClick = (
 ref: React.RefObject<HTMLElement>,
 callback: () => void,
 enabled = true
): void => {
 const el = ref.current
 useEffect(() => {
   if (!enabled) {
     return
   }

   const handleClick = e => {
     if (el && !el.contains(e.target)) {
       callback()
     }
   }

   document.addEventListener('click', handleClick)

   return () => {
     document.removeEventListener('click', handleClick)
   }
 }, [callback, el, enabled])
}

export default useOutsideClick

【问题讨论】：

请修改您的标题以提出明确、具体的问题。不要列出标签。

标签： javascript reactjs jestjs react-hooks ts-jest

【解决方案1】：

将钩子加载/导入到测试文件中，然后像这样模拟它。

import useOutsideClick from "../your-file-name";
jest.mock('../your-file-name', () => ({
     useOutsideClick: jest.fn() 
}));

【讨论】：