React测试中是否应验证函数调用？

1. expect(onSubmit).toBeCalledTimes(1)算不算测试实现细节？ #

得分场景看：

• 如果onSubmit是组件内部私有的函数，那测试它的调用次数就是在盯实现细节——哪天你把函数名改成onFormSubmit，或者重构了内部逻辑，测试直接挂掉，完全违背“测试行为而非实现”的原则。
• 但如果onSubmit是父组件传入的回调Prop，测试它的调用次数其实是在验证组件的对外行为：当用户触发提交动作时，组件是否正确把事件通知给了父组件。这种情况下，它属于组件核心行为的一部分，不是实现细节。

2. 到底该测函数调用还是实际效果？ #

• 优先测可观测的行为结果：如果提交动作会带来UI变化（比如显示成功提示、清空表单），或者会触发外部状态变更（比如修改全局状态），优先测试这些实际效果。比如：
  • 提交后断言页面上出现了「提交成功」的提示元素
  • 提交后断言表单输入框的值被清空
• 回调Prop场景特殊处理：如果组件的核心职责就是转发用户动作给父组件（比如通用表单组件、按钮组件），此时测试回调的调用次数、传入参数是否正确，就是在验证它的核心功能，完全合理。

3. 怎么避免踩“测试实现细节”的坑？ #

• 站在用户视角写测试：只模拟用户会做的操作（点击按钮、输入文本），然后断言页面的变化，别去关心组件内部用了什么函数、变量名是什么。
• 尽量避免直接断言组件内部的私有方法或变量，除非是极特殊的边缘场景。
• 重构时如果测试挂了，先搞清楚：是组件的实际行为真的变了，还是只是内部实现方式改了？如果是后者，说明你的测试写偏了，在盯实现细节。

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