测试过程中react-select-event无法触发onChange函数设置对应值的问题

DevOps 小满

2026-9-25

问题根因与对应解决方法

元素引用缓存失效：不要在循环开始前一次性查询所有react-select的元素并缓存，react-select在选中值后会触发组件重渲染，缓存的旧元素引用会丢失绑定的事件处理函数。应该在每次迭代操作前，重新查询获取当前要操作的react-select元素实例。
全局container配置导致定位错误：你当前配置了container: document.body，react-select-event会在整个页面下查找可操作的输入元素，多实例场景下会始终定位到第一个react-select的输入，后续迭代自然无法触发对应实例的onChange。修改方案为将container设置为当前要操作的react-select实例的根元素，修改后的代码如下：

const selectOptionAndAssertValue = async (indicator, field, selectRootElement, option, inputForm) => {
  await selectEvent.select(selectRootElement, option.label, {
    // 把container改为当前操作的select根元素，限定查找范围
    container: selectRootElement,
  });

  await waitFor(
    () => {
      expect(inputForm).toHaveFormValues({
        [`${indicator.short_alias}-${field}`]: option.value,
      });
    },
    {
      onTimeout: error => console.log(error),
    }
  );
};

循环异步调用时序问题：不要用同步遍历（比如forEach）调用异步的选择方法，会导致多个选择操作同时执行，前一个操作触发的重渲染会破坏后一个操作的元素状态。建议用for...of循环串行执行每个选择操作，示例如下：

// 假设formList是你要遍历的4个表单配置数组
for (const formItem of formList) {
  // 每次迭代重新查询对应select元素
  const currentSelect = await screen.findByTestId(`select-${formItem.id}`);
  await selectOptionAndAssertValue(
    formItem.indicator, 
    formItem.field, 
    currentSelect, 
    formItem.option, 
    formItem.inputForm
  );
}