ReactJS RTL组件测试：edit场景onSaved回调异常调用排查

从给出的代码来看，问题分三个层面：

1. 测试用例状态污染（核心直接原因）：两个测试用例共用同一个mockOnSaved模拟函数，但没有在每个用例执行前重置mock的调用记录。第一个add场景的用例执行时会触发一次onSaved，mock调用计数变为1；第二个edit场景用例运行时，计数没有被清零，哪怕edit逻辑根本没触发onSaved，mock依然保留上一个用例的1次调用记录，直接导致「回调未被调用」的断言失败。
2. 组件代码存在多处实现错误：
   • 函数组件入参写法错误：React函数组件仅接收一个props对象作为第一入参，第二入参是转发ref用的，你写的function Form(action, onSaved)会导致action拿到的是整个props对象（{action: xxx, onSaved: xxx}），onSaved拿到的是undefined，action === 'add'的判断永远不成立（如果实际代码没做解构的话，第一个用例也不可能通过，应该是贴代码时漏了解构的大括号）。
   • 成功回调写法错误：onSuccess: onSaved()是立即执行onSaved函数，把执行结果赋值给onSuccess，不是把函数作为回调传给createData等待请求成功后触发，会导致回调时机完全错误。
   • 语法与绑定错误：const handleSubmit() = {}是非法语法，正确写法应该是const handleSubmit = () => {}，另外需要把handleSubmit绑定到form的onSubmit事件上，否则提交逻辑根本不会触发。
3. 异步逻辑未等待：如果createData/updateData是异步请求，点击按钮后直接断言，回调可能还没执行，也会出现断言结果不符合预期的问题。

• 先排查mock状态问题：在edit用例的最开头、点击提交按钮前分别打印mockOnSaved.mock.calls.length，如果点击按钮前调用数已经是1，直接确认是mock未重置导致的状态污染。
• 再排查组件props取值问题：在handleSubmit入口处打印action和onSaved的值，确认edit场景下action确实是字符串'edit'，onSaved是传入的mock函数，排除props未正确解构、action传值错误（比如大小写不对、带空格）的问题。
• 接着排查逻辑触发问题：在handleSubmit的if和else分支分别打日志，确认点击提交按钮时edit场景确实走了updateData分支，没有进入add的逻辑分支，同时确认没有其他地方（比如useEffect、渲染逻辑里）意外调用了onSaved。
• 最后排查异步时序问题：如果用了异步请求，确认断言时已经等所有异步逻辑执行完毕，没有提前断言。

修复后的Form组件 #

// 正确解构props，修正语法，修正回调写法，绑定提交事件
function Form({ action, onSaved, payload }) {
  const handleSubmit = (e) => {
    e.preventDefault();
    if (action === 'add') {
      createData(payload, {
        onSuccess: onSaved // 传函数引用，不要加()立即执行
      });
    } else {
      updateData(payload);
    }
  }
  return (
    <form onSubmit={handleSubmit}>
      {/* 表单内容 */}
      <button type="submit">提交</button>
    </form>
  )
}

修复后的测试代码 #

// 每个用例执行前重置所有mock状态，清除调用记录
beforeEach(() => {
  jest.clearAllMocks();
});

it('handle create', async () => {
   render(<Form action="add" onSaved={mockOnSaved} payload={testPayload} />);
   // 填写表单等前置操作
   fireEvent.click(screen.getByRole('button', { name: /提交/ }));
   // 等待异步逻辑执行完成再断言
   await waitFor(() => {
     expect(mockOnSaved).toHaveBeenCalledTimes(1);
   });
})

it('handle update', async () => {
   render(<Form action="edit" onSaved={mockOnSaved} payload={testPayload} />);
   // 填写表单等前置操作
   fireEvent.click(screen.getByRole('button', { name: /提交/ }));
   // 等待异步逻辑执行完成再断言
   await waitFor(() => {
     expect(mockOnSaved).not.toHaveBeenCalled();
   });
})

内容的提问来源于stack exchange，提问作者Tuti Herwiyati