Cypress E2E调试模式下鼠标悬停触发无限重复请求问题咨询

场景与代码 #

在React项目中执行npx cypress open打开调试窗口，查看测试用例并检查快照时遇到异常。

测试用例代码 #

describe("Scheduled changes table", () => {

  beforeEach(() => {

    cy.fixture("scheduledChangesList.json").as("scheduledChangesList");

  });
 

  it("Shows Confirmation modal after selecting Cancel", () => {

    cy.intercept("GET", "/scheduled-changes/api/v1/scheduled-changes", {

      fixture: "scheduledChangesList.json",

    }).as("getScheduledChangesList");
 

    cy.visit("/");

  });
});

组件请求钩子代码 #

export async function getScheduledChanges(id) {
  const response = await fetch(`/scheduled-changes/api/v1/scheduled-changes${id}`);
  const data = await response.json();
  return data;
}

问题 #

测试结束后，在“After all”区域鼠标悬停时，组件钩子中的请求会开始无限重复发起，这属于正常行为吗？

解答 #

这绝对不是正常行为，问题根源主要有这几个：

1. 拦截路径不匹配：你设置的拦截目标是/scheduled-changes/api/v1/scheduled-changes，但实际发起的请求是带id参数的/scheduled-changes/api/v1/scheduled-changes${id}，导致请求没被拦截，真实请求可能返回错误，触发组件里的重试逻辑，进而无限循环。
2. 组件逻辑漏洞：组件内的请求钩子（比如useEffect）可能没有错误处理或重试限制，请求失败后反复触发调用，测试结束后组件仍处于活跃状态，悬停操作触发DOM检查时就会激活这个循环。
3. Cypress测试后状态残留：测试结束后Cypress默认保留DOM状态，组件没有被卸载，持续运行内部逻辑，悬停“After all”区域时的DOM操作又触发了请求钩子。

解决方向 #

• 修正拦截规则：用通配符匹配带参数的请求，比如cy.intercept("GET", "/scheduled-changes/api/v1/scheduled-changes*", { fixture: "scheduledChangesList.json" })，确保所有相关请求都被拦截。
• 完善组件请求逻辑：给请求添加错误捕获和重试次数限制，避免失败后无限发起请求。
• 测试后清理状态：在afterEach钩子中添加清理操作，比如cy.clearLocalStorage()或者触发组件卸载，让测试结束后组件停止运行。

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