React 18升级后Cypress无法打开自定义Select组件问题求助

我们的Web应用使用自定义Select组件，结构如下：

点击前的HTML结构 #

<div data-testid="CmdSimpleSelectValue-null" id="simpleSelect-customerId-closed" data-cy="simpleSelect-customerId" class="CmdSimpleSelect-module_form-control-labels__WN00R CmdSimpleSelect-module_form-control__pio52 icons-module_new-css-icon-dropdown__a-138"
  title=""><span class="CmdSimpleSelect-module_text-truncate__t2yRn" id="span-customerId-closed" title="Zvoľte zákazníka">Zvoľte zákazníka</span></div>

点击后下拉选项的HTML结构 #

<div class="CmdSimpleSelect-module_b-dropdown__content__xlH-Q" style="max-height: 300px; overflow: auto;">
  <ul class="CmdSimpleSelect-module_b-dropdown__list__AlyR0 CmdSimpleSelect-module_simple-list__WGq0-">
    <li>
      <a href="#" title="Zvoľte zákazníka" class="CmdSimpleSelect-module_item__0fz-l" data-cy="simpleSelect-customerId-" data-value=""><span class="CmdSimpleSelect-module_text-truncate__t2yRn">Zvoľte zákazníka </span>
    </a>
    </li>
    <li>
      <a href="#" title="TEST - Commander Services s.r.o." class="CmdSimpleSelect-module_item__0fz-l" data-cy="simpleSelect-customerId-793" data-value="793"><span class="CmdSimpleSelect-module_text-truncate__t2yRn">TEST - Commander Services s.r.o. (TCM)
    </span>
    </a>
    </li>
    <li>
      <a href="#" title="Direct pojišťovna, a.s." class="CmdSimpleSelect-module_item__0fz-l" data-cy="simpleSelect-customerId-50022" data-value="50022">
        <span class="CmdSimpleSelect-module_text-truncate__t2yRn">Direct pojišťovna, a.s. (DRCP)
    </span>
      </a>
    </li>
  </ul>
</div>

该组件无法使用常规select方法，只能通过点击触发下拉后选择选项。React 18升级前，以下Cypress代码可正常运行：

cy.get("[data-cy=simpleSelect-customerId]")
  .should('exist')
  .click({
    force: true
  });

cy.get('[data-cy="simpleSelect-customerId-' + vehicles.CustomerTest_id + '"]')
  .should('exist')
  .click();

但升级后，Cypress执行点击操作后下拉菜单未展开，导致后续定位选项失败。已尝试触发事件、hover、等待、双击、坐标点击等方法，均无效，且无法改为原生Select组件，寻求解决办法。

可行解决方案 #

1. 模拟mousedown事件 #

部分自定义组件会监听mousedown而非click事件触发下拉，替换click为trigger('mousedown')：

cy.get("[data-cy=simpleSelect-customerId]")
  .should('exist')
  .trigger('mousedown', { force: true });

cy.get(`[data-cy="simpleSelect-customerId-${vehicles.CustomerTest_id}"]`)
  .should('be.visible')
  .click();

2. 等待下拉容器可见 #

React 18的并发渲染可能导致元素渲染延迟，添加对下拉容器的可见性断言，确保下拉展开后再定位选项：

cy.get("[data-cy=simpleSelect-customerId]")
  .should('exist')
  .click({ force: true });

// 等待下拉容器出现并可见
cy.get('.CmdSimpleSelect-module_b-dropdown__content__xlH-Q')
  .should('be.visible');

cy.get(`[data-cy="simpleSelect-customerId-${vehicles.CustomerTest_id}"]`)
  .click();

3. 使用真实点击事件（需插件支持） #

安装cypress-real-events插件模拟浏览器原生点击，避免Cypress虚拟点击的兼容性问题：

npm install cypress-real-events --save-dev

在cypress/support/e2e.js中引入插件：

import 'cypress-real-events/support';

修改测试代码：

cy.get("[data-cy=simpleSelect-customerId]")
  .should('exist')
  .realClick();

cy.get(`[data-cy="simpleSelect-customerId-${vehicles.CustomerTest_id}"]`)
  .should('be.visible')
  .realClick();

4. 直接设置组件值（针对受控组件） #

如果自定义Select是受控组件，可直接设置其绑定的状态值，绕过点击触发逻辑：

// 假设组件通过属性绑定值，直接设置并触发change事件
cy.get("[data-cy=simpleSelect-customerId]")
  .invoke('attr', 'data-value', vehicles.CustomerTest_id)
  .trigger('change');

5. 结合聚焦操作 #

先让组件获得焦点再点击，模拟真实用户操作流程：

cy.get("[data-cy=simpleSelect-customerId]")
  .should('exist')
  .focus()
  .click({ force: true });

cy.get(`[data-cy="simpleSelect-customerId-${vehicles.CustomerTest_id}"]`)
  .should('be.visible')
  .click();

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