使用Cypress测试React Select下拉框：选中值无法提交问题

问题分析 #

React Select是受控组件，依赖React合成事件更新内部状态。你当前的Cypress点击操作虽更新了UI，但可能未正确触发onChange事件，导致组件绑定的表单值未同步，最终提交时未携带选中项。

解决方案 #

1. 完善交互触发，确保React事件被捕获

React Select的选项选择依赖mousedown事件，单纯click可能无法完全触发React的事件机制，修改代码如下：

// 处理第一个下拉框
cy.get('.react-select-container')
  .first()
  .click();
cy.get('.react-select__option')
  .eq(1)
  .trigger('mousedown') // 先触发mousedown，匹配React Select的事件监听逻辑
  .click({ force: true }); // 强制点击，确保事件被组件捕获

// 处理第二个下拉框
cy.get('.react-select-container')
  .eq(1)
  .click();
cy.get('.react-select__option')
  .eq(1)
  .trigger('mousedown')
  .click({ force: true });

// 处理第三个下拉框
cy.get('.react-select-container')
  .eq(2)
  .click();
cy.get('.react-select__option')
  .eq(1)
  .trigger('mousedown')
  .click({ force: true });

// 等待状态更新（替换固定wait，测试更稳定）
cy.get('.react-select-container')
  .eq(2)
  .find('.react-select__single-value')
  .should('have.text', '目标选项文本'); // 替换为你选中的选项实际显示文本

cy.get('.btn').click({ force: true });
cy.wait('@backendReq')
  .its('response.statusCode')
  .should('be.oneOf', [200, 201]); // 修正原代码逻辑错误，检查状态码是否为200或201

2. 直接操作隐藏输入框同步值

React Select会渲染一个隐藏的<input>元素用于同步选中值，可直接对其赋值并触发change事件：

// 针对第一个下拉框，替换为实际选项的value和显示文本
cy.get('.react-select-container')
  .first()
  .find('input')
  .invoke('val', '选项的value值')
  .trigger('change', { force: true });

// 验证选中状态
cy.get('.react-select-container')
  .first()
  .find('.react-select__single-value')
  .should('have.text', '选项显示文本');

3. 替换固定等待，依赖状态断言

原代码中的cy.wait(500)、cy.wait(1500)属于不稳定的硬等待，应通过断言等待组件状态更新完成，比如等待选中项的文本出现，确保React状态同步后再提交表单。

注意点 #

• 原代码中.should('eq', 200 || 201)存在逻辑错误，200 || 201的结果恒为200，无法检查201状态码，需改用be.oneOf方法。
• 若使用React Select的多选项模式，需调整断言逻辑，比如检查.react-select__multi-value元素的数量或文本。

内容的提问来源于stack exchange，提问作者Admir Mehmedović