Typescript 使用Cypress测试从Reaction受控列表中删除项目

each()循环是processing too fast，以允许应用程序完成每个删除操作.

内环需要一个assertion to confirm the action has completed.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

这是通过考试的日志(log)