React受控列表删除功能的Cypress测试问题及优化方案咨询

问题背景 #

我创建了一个React列表，用户可点击按钮删除列表项，删除逻辑代码如下：

const handleRemove = (index: number) => {
  onChange(fieldName, (prevState) => {
    return {
      ...prevState,
      [fieldName]: prevState[fieldName].filter((_: any, i: number) => i !== index),
    };
  });
};

手动测试功能正常，但用Cypress测试时删除不符合预期，部分列表项残留。推测原因是Cypress同时触发所有删除按钮，列表快速变化时依赖索引删除不可靠。

疑问 #

1. 该问题在实际生产环境中是否会引发问题？若会，应如何改写删除逻辑？
2. 若该问题影响不大，应如何修改Cypress测试脚本，等待React完成状态更新？

我自行尝试的脚本：

cy.get(".fa-solid.fa-minus").each((element, index) => {
      cy.wait(index * 3).then(() => {
        element.trigger("click");
      });
});

问题解答 #

1. 生产环境的问题及删除逻辑优化 #

会引发问题。实际用户操作虽不会像Cypress那样极速触发，但如果用户短时间内连续点击删除按钮（比如双击、快速点多个），同样会因为列表索引动态变化导致删除错误——比如原本要删第2项，结果前一项先被删除，此时第2项变成了第1项，最终删错目标。

优化方案：改用唯一标识而非索引删除
给列表的每一项绑定唯一ID（比如后端返回的id或前端生成的UUID），删除时根据ID过滤，彻底摆脱索引依赖：

// 假设列表项结构为 { id: string, ...otherProps }
const handleRemove = (itemId: string) => {
  onChange(fieldName, (prevState) => {
    return {
      ...prevState,
      [fieldName]: prevState[fieldName].filter(item => item.id !== itemId),
    };
  });
};

这种方式不管列表顺序怎么变，只要拿到目标项的唯一ID，就能精准删除，从根源上避免索引偏移问题。

2. Cypress测试脚本优化 #

如果暂时不改逻辑，不能用固定时长的cy.wait(index *3)这种不稳定的硬等待。应该让Cypress等待React状态更新、DOM重新渲染完成后再执行下一次删除：

方案1：每次删除后等待列表项数量减少

cy.get(".fa-solid.fa-minus").then($buttons => {
  const total = $buttons.length;
  for (let i = 0; i < total; i++) {
    // 每次重新获取第一个删除按钮（列表动态变化后，后续按钮会前移）
    cy.get(".fa-solid.fa-minus").first().click();
    // 等待列表项数量符合预期，确保DOM更新完成
    cy.get(".list-item").should("have.length", total - i - 1);
  }
});

注：将.list-item替换为实际列表项的DOM选择器。

方案2：基于按钮数量变化等待DOM更新

cy.get(".fa-solid.fa-minus").each(($button, index, $list) => {
  // 始终操作当前第一个删除按钮
  cy.wrap($list.eq(0)).click();
  // 等待删除按钮数量减少，确认状态更新完成
  cy.get(".fa-solid.fa-minus").should("have.length", $list.length - index - 1);
});

这种方式保证每次删除操作都在DOM更新完成后触发，避免批量点击导致的索引混乱。

内容的提问来源于stack exchange，提问作者Laczkó Örs