react-testing-library如何断言拖拽事件不触发且不测试实现细节

你遇到的报错本质是模拟操作不符合用户真实拖拽流程：用户拖拽时一定会先触发dragstart进入拖拽状态，才会有后续的drop事件，你直接调用fireEvent.drop跳过了前置步骤，自然会触发状态不匹配的异常。

符合「像用户一样测试」理念的测试方式可以按下面两种场景选择，完全不会涉及实现细节：

• 如果你禁用拖拽的方式是直接把元素的draggable属性设为false：直接断言目标元素的draggable属性值为false即可。这个属性是HTML原生标准属性，直接决定用户能不能拖动元素，属于用户可感知的交互表现，不属于实现细节。
• 如果你禁用拖拽的方式是阻止拖拽事件的默认行为、或者逻辑上不处理拖拽结果：按真实用户的操作顺序走完完整拖拽流程，再断言业务效果没有触发即可，操作步骤参考：
  1. 触发待拖拽元素的dragstart事件
  2. 触发目标放置区域的dragenter、dragover事件
  3. 触发目标放置区域的drop事件
  4. 断言你期望的拖拽后效果没有发生（比如列表没有重排、关联数据没有更新、没有新增/删除元素等用户可见的变化）

不要去断言某个内部事件处理函数有没有被调用、事件有没有被阻止这类实现细节，只要最终用户可见的交互结果符合预期，测试就是有效的。

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