Animation Cypress等待转换完成（等待正确的宽度）

我有菜单和汉堡按钮来切换它，我想测试一下这个行为。但，菜单并没有完全消失，只是隐藏时变薄了（只是图标可见），所以我不能测试它是否可见，因为它总是可见的

因此，我通过

invoke（'width'）

检查维度，如下所示：

cy.get('[data-test="sidebar"]')
  .invoke('width')
  .should('be.above', 200)
cy.get('[data-test="sidebar-toggle"]')
  .click()
cy.get('[data-test="sidebar"]')
  .invoke('width')
  .should('be.below', 100)

但我发现错误

ResizeObserver循环限制超出了
，因为单击后它不会等待菜单转换完成。因此，我刚刚在
单击（）
之后添加了
等待（500）
，现在它可以工作了。
但这不是一个小哈奇吗？现在我需要为每个转换设置正确的延迟，或者总是设置非常长的延迟，这将适用于所有转换，但这是浪费测试时间

有没有什么简单的通用方法告诉Cypress等待我的宽度达到它应该达到的值，而不是立即放弃？
该
.should（）
命令内置了重试功能，但看起来它并没有重试整个链

使用内部带有
expect
的回调函数将should表达式转换为单个步骤

cy.get（'[data test=“sidebar”]'））
.should（$el=>expect（$el.width（））.to.be.over（200））
cy.get（'[data test=“sidebar toggle”]'）。单击（）
cy.get（'[data test=“sidebar”]'））
.should（$el=>expect（$el.width（））.to.be.低于（100））


根据消息，这是良性的

如果Cypress由于此错误而导致测试失败，您可以通过将此代码添加到测试顶部来接受它

Cypress.on（'uncaught:exception'，（err，runnable）=>{
if（err.message.includes（'超出ResizeObserver循环限制'））{
返回错误
}
})

或者更改对ResizeObserver（在应用程序源中）的调用，以包括动画帧请求

const resizeObserver=新的resizeObserver（条目=>{
//将其包装在requestAnimationFrame中以避免“超出循环限制”错误
window.requestAnimationFrame（（）=>{
if（！Array.isArray（entries）| |！entries.length）{
返回；
}
//你的代码
});
});
不幸的是，同样的事情
超出了ResizeObserver循环限制（哦，是的，我忘记了那个错误消息）。