如何用React Testing Library测试单选按钮Change事件？点击触发报错

针对你用fireEvent.click触发事件报错的情况，这类自定义下拉组件（比如你的DropdownSingle）不能直接点击组件容器，得按组件的实际交互流程来测试：

• 首先用测试库定位到下拉组件内部的触发元素（通常是组件自带的按钮或输入框）：

  const dropdownTrigger = screen.getByTestId('select-value').querySelector('button, input');
  

• 触发下拉面板展开：

  fireEvent.click(dropdownTrigger);
  

• 找到你要选择的目标选项（可以通过选项文本、自定义data-testid定位）：

  const targetOption = screen.getByText('目标选项的名称');
  

• 点击选中该选项：

  fireEvent.click(targetOption);
  

• 最后断言回调函数是否被正确调用（如果用Jest，需提前把handleChange设为mock函数）：

  expect(handleChange).toHaveBeenCalledWith('对应选项的id', 'valuez');
  

额外注意：

• 若组件包含异步渲染逻辑，记得用waitFor包裹断言代码，避免异步更新导致断言失败
• 不要直接点击整个DropdownSingle组件容器，必须定位到组件内部负责触发下拉的交互元素

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