Javascript 集成测试异步DOM事件处理程序

我继承了大量的集成测试，这些测试针对DOM元素模拟鼠标/触摸事件，并在执行结果操作时定期断言应用程序状态

这些测试中的一个常见问题是未能等待异步行为的完全完成，从而导致意外的副作用

考虑以下几点：

const LoadState={
未决：'未决'，
已加载：“已加载”，
失败：“失败”
};
常量应用={
声明：{
loadState:loadState.Pending，
renderAnimationFrameId:null
},
用户界面：{
loadState:document.getElementById（'load-state'），
loadButton:document.getElementById（'load-button'）
},
初始化（）{
this.\u load=this.\u load.bind（this）；
this.ui.loadButton.addEventListener（'click'，this.\u load）；
},
render（）{
//将渲染限制为帧速率。
if（this.state.renderAnimationFrameId）{
返回；
}
this.state.renderAnimationFrameId=requestAnimationFrame（（）=>{
this.ui.loadState.textContent=this.state.loadState；
this.state.renderAnimationFrameId=null；
});
},
_加载（）{
fetch（新请求（'flowers.jpg'））。然后（{ok}）=>{
this.state.loadState=ok？loadState.Loaded:loadState.Failed；
}).catch（（）=>{
this.state.loadState=loadState.Failed；
}).最后（（）=>{
这个。render（）；
});
}
};
App.initialize（）；
App.render（）

悬而未决的