使用 cypress 处理 React 重新渲染答案

【问题标题】：Handling React re-renders with cypress使用 cypress 处理 React 重新渲染
【发布时间】：2020-10-16 09:26:06
【问题描述】：

我有两个 react-select Selects 并排。选择一个更新状态并确定第二个Select 中的值。

我的cypress 测试是这样做的：

// select an option in the first select - this works
cy.get('div[class*="container"]').contains('Select 1').click()
cy.get('div[class*="option"]').contains('Select 1 Option 1').click()

// select an option in the second select - this doesn't work
cy.get('div[class*="container"]').contains('Select 2').click() // <<< error occurs here
cy.get('div[class*="option"]').contains('Select 2 Option 1').click()

所以，第一个Select中的选项选择成功。但第二个不是 - 我收到此错误：

Timed out retrying: cy.click() failed because this element is detached from the DOM.

我在getting 第二个Select 之前尝试了cy.wait(10)，是的，这是不好的做法，但即便如此，它也没有解决问题。我该如何正确地做到这一点？

编辑：

这里是Selects 实现的抽象：

const [state, setState] = useState([
  {
    select: '', option: ''
  }
])

const options = {
  "Select 1": [
    "Select 1 Option 1",
    "Select 1 Option 2"
  ],
  "Select 2": [
    "Select 2 Option 1",
    "Select 2 Option 2"
  ]
}

return (
  {state.map((row, index) => {
    <Select
      options={Object.keys(options)}
      value={row.select}
      onValueChange={value => setState({
        ...state,
        select: value
      })}
    />
    <Select
      options={options[row.select]}
      value={row.option}
      onValueChange={value => setState({
        ...state,
        option: value
      })}
    />
  })}
)

当然，react-select 不能接受一个字符串数组作为options，所以在我的实际实现中，我有一个函数可以将每个字符串转换为一个{label: '', value: ''} 对象，但这对于本例来说不是必需的。

上面的想法是，当我选择第一个Select的值时，由于state发生了变化，视图被重新渲染。

【问题讨论】：

你能分享一下实际的选择代码吗？
嗨@gilamran，我添加了一些我的实现的说明性代码。实际的实现更复杂——Select 是用自定义样式和功能等抽象出来的——但这代表了我的实际实现。
用options.map替换{state.map((row, index)

标签： reactjs cypress react-select

【解决方案1】：

从您的抽象中猜测有点困难，但似乎您没有更新设置第二个选择值的state.option 的值。我不确定你的默认状态是什么，但是从你上面的 cypress 的 sn-p 中找不到任何一个选择，因为当你这样做 cy.get('div[class*="container"]').contains('Select 1') 时，没有一个 DOM 元素实际上会包含匹配的字符串 Select 1。

因为你提到第一个 cy 命令有效，所以我不确定 Select 是如何初始化的，所以这有点猜测。

看这里：https://codesandbox.io/s/compassionate-moon-ss4z9?file=/src/App.js

【讨论】：