使用 Cypress 测试从 React 控制列表中删除项目

Question

我创建了一个 React 列表，用户可以通过单击按钮来删除项目。

删除的处理方式如下：

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

当我手动测试它时，它工作正常，但是当我用 Cypress 测试它时，删除项目无法按预期工作，一些项目仍然存在。（我假设）问题在于 Cypress 同时按下每个“列表删除按钮”，当列表快速变化时，通过索引删除项目是不可信的。在现实生活中这不会造成任何问题，对吗？

如果可以的话，删除逻辑该如何重写？

如果这没什么大不了的，我怎样才能重写我的 Cypress 测试来等待几毫秒，同时 React 进行状态更新呢？

这是我经过几个小时的修补后得出的结论：

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

Answer 1

循环each()处理速度太快，无法让应用程序完成每个删除操作。

内部循环需要一个断言来确认操作已完成。Cypress 在执行下一次迭代之前等待该断言。

在下面的示例中，断言检查列表长度是否已减少。

由于没有完整的示例，我使用了以下组件：

import React from 'react';
import {useState} from 'react'

const initialList = ['Cypress', 'Javascript', 'Typescript']

export const List = () => {
  const [list, setList] = useState(initialList)

  const handleRemove = (index) => {
    setList(prevState => prevState.filter((_, i) => i !== index))
  }

  return (
    <ul>
      {list.map(function(item, index) {
        return <>
          <li key={item}>{item}</li>
          <button onClick={() => handleRemove(index)}>Delete</button>
        </>
      })}
    </ul>
  )
}

这是测试

const itemList = ['Cypress', 'Javascript', 'Typescript']

const selector = 'button:contains("Delete this one")'

cy.get(selector)
  .each(($el, index, $list) => {
    cy.get(selector).first().click()

    // wait for action to complete

    // using list count
    cy.get(selector).should('have.length', $list.length - index -1)

    // or using item text
    cy.contains(itemList[index]).should('not.exist') 
  })

cy.get(selector).should('not.exist')       // all gone

这是通过测试的日志