React函数组件测试：Mock函数被调用两次问题排查

针对你遇到的Mock函数被调用两次的问题，即使useEffect中没有直接调用目标函数，仍可能由以下原因导致，对应解决方法如下：

可能原因及排查方向 #

• 组件重复渲染导致事件逻辑重复执行
  虽然useEffect里没有调用deleteComment，但如果useEffect的依赖项在删除操作后发生变化，会触发组件重渲染。若删除按钮的点击事件处理函数未通过useCallback缓存，重渲染时可能导致逻辑被重复触发，最终引发两次调用。

• React Query缓存操作间接触发
  你使用了queryClient，删除评论后若执行了invalidateQueries、setQueryData等缓存更新操作，可能触发相关查询的重新执行。如果查询逻辑中存在误调用deleteComment的情况（或依赖的其他函数间接调用了它），就会导致二次调用。

• Mock函数未重置干净
  若mockDeleteComment在多个测试用例中复用，且未在当前测试开始前重置调用次数，之前测试的残留调用会影响本次断言结果。

• 调用来源不明确
  两次调用可能来自组件的不同逻辑分支，比如删除操作的确认弹窗、状态更新后的副作用等，只是未被注意到。

具体排查步骤 #

1. 添加调用栈日志定位来源
   在mockDeleteComment中打印调用栈，明确两次调用的触发路径：

   const mockDeleteComment = jest.fn(() => {
     console.log('Delete comment call stack:', new Error().stack);
     return Promise.resolve({});
   });
   

   通过日志可以直接看到两次调用分别来自哪里，快速定位问题代码。

2. 检查useEffect依赖与组件渲染次数
   在组件内部添加渲染日志，确认删除操作后是否发生了不必要的重渲染：

   console.log('Component rendered');
   

   同时检查useEffect的依赖数组，确保没有冗余依赖导致频繁触发。

3. 重置Mock函数状态
   在测试用例开头添加Mock重置逻辑，避免跨测试污染：

   beforeEach(() => {
     mockDeleteComment.mockClear();
   });
   

   或在当前测试的spy创建前执行重置。

4. 检查React Query的缓存操作
   查看组件中删除评论后的逻辑，确认是否有缓存更新操作触发了查询重执行，进而间接调用了deleteComment。

5. 确保事件处理函数被缓存
   若删除按钮的点击事件是内联函数，改用useCallback包裹，避免重渲染时创建新函数导致的潜在逻辑重复：

   const handleDelete = useCallback(async () => {
     // 删除逻辑
   }, [/* 必要依赖 */]);
   

内容的提问来源于stack exchange，提问作者Rahele Nazari