测试函数是否被调用

Question

我有一个简单的 React 钩子：

const useHook = () => {
   useEffect(() => {
      window.addEventListener('click', handleClick);
   }, []);

   const handleClick = () => {};

   return null;
};

我是否能够以某种方式测试是否在click事件上调用了handleClick函数？

我当然可以在 Jest 中模拟click事件。 但是如何检查这个 fn 是否被调用？

Answer 1

我相信你可以检查事件目标。 如果不存在，则您的函数不是由事件触发的。 如果存在，您可以确定事件的类型。 在这里，我设置了侦听器，然后从代码中调用该函数。 单击按钮以查看差异。

 const handleClick = (e) => { if(e) { console.log(e.type); } else { console.log('called from code'); } }; document.querySelector('#clicker').addEventListener('click', handleClick); handleClick();

 button { height: 20px; width: 60px; background-color: darkgrey; color: white; }

 <button id='clicker'>CLICK ME</button>

Answer 2

使用计数包装器怎么样？

 function countFn(fn) { let wrapper = function() { wrapper.called ++; return fn.apply(this, arguments); } wrapper.called = 0; return wrapper; } const handleClick = countFn((e) => {console.log(e)}); handleClick(1); handleClick(2); handleClick(3); console.log(`handleClick called ${handleClick.called} times`);

1
2
3
handleClick called 3 times