在 Cypress 中，我如何验证拦截的 API 已被调用 (n) 次？答案

【问题标题】：In Cypress, How Can I Validate That An Intercepted API Has Been Called (n) Times?在 Cypress 中，我如何验证拦截的 API 已被调用 (n) 次？
【发布时间】：2022-11-23 14:59:46
【问题描述】：

我正在使用 Cypress 进行组件测试。这些是集成式测试，我安装了我的整个应用程序 (React)，然后单击它。所有 API 调用都使用赛普拉斯拦截功能进行模拟。到目前为止，这是一个非常强大的解决方案，比我使用过的任何其他 FE 测试套件都要强大得多。

我遇到的一个限制是拦截的 API 调用。我有这样的场景，我有一个 API 在给定测试流程中被调用两次。我要验证的条件之一是它确实被调用了两次，因为第二次调用是由我正在测试的逻辑触发的。

所以我想要工作的特定赛普拉斯验证是这样的：

cy.get('#myButton').click(); // Triggers the second API call
cy.get('@myApi.all').should('have.length', 2);

现在，问题是上面的代码本身失败了，因为 Cypress 只注册了一个名为 myApi 的拦截 API 的调用。这样做的原因是赛普拉斯采取行动立即验证对此拦截的 API 的调用次数，而不是等待我刚刚在 UI 中触发的操作。

我知道使上述代码工作的唯一方法是添加显式等待，如下所示：

cy.get('#myButton').click(); // Triggers the second API call
cy.wait(300);
cy.get('@myApi.all').should('have.length', 2);

因为我在单击按钮后明确等待 300 毫秒，所以有足够的时间进行第二次 API 调用并让 Cypress 注册它，因此测试通过。

我不喜欢这个解决方案。我不喜欢在我的测试代码中添加显式等待，这感觉就像一个创可贴，并且很可能容易出错，因为它依赖于执行时间来成功。但是，我根本不知道有更好的选择。

所以这就是我写这个问题的原因。我希望有人可以为此提出更好的解决方案。谢谢你。

【问题讨论】：

标签： cypress

【解决方案1】：

这几乎是正确的，但不是 cy.wait(300) 使用 cy.wait('@myApi') - 因为 cy.get('@myApi') 是非等待的。

cy.get('#myButton').click()
cy.wait('@myApi')
cy.get('@myApi.all').should('have.length', 2)

【讨论】：