javascript - 使用 Jest 的 React.js 自定义钩子测试

Question

我正在尝试使用 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

标签： javascriptreactjsjestjsreact-hooksts-jest

Answer 1

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

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