Formik：如何为<select>字段触发onChange的fireEvent？

在React项目中使用Formik处理表单，对应的<Select>字段代码如下：

{({ field }) => {
  return (
    <Select
      {...field}
      id="icon"
      value={selectedIcon}
      onChange={(item) => {
        handleSample();
        dispatch(
          abcd(index, "icon", item.value)
        );
      }}
      options={dropdownData.icons}
      styles={{
        menuList: (provided) => ({
          ...provided,
          height: "146px",
        }),
      }}
    />
  );
}}
</Field>

测试时尝试用fireEvent.change(input, { target: { value: "Test" } })触发变更事件，但并未调用onChange方法，请问该如何正确触发change事件？

你用的应该是第三方UI库（比如react-select）的<Select>组件，它不是原生HTML的<select>，原生fireEvent.change无法触发它的onChange逻辑，可按以下方式处理：

• 模拟真实用户的选择行为
  第三方Select组件需要先展开下拉菜单再点击选项，测试步骤如下：

  1. 获取Select组件的触发元素（建议给组件加data-testid方便定位，比如data-testid="icon-select"）
  2. 用fireEvent.click点击该元素展开下拉菜单
  3. 通过选项文本找到目标选项元素
  4. 用fireEvent.click点击选项完成选择
     示例代码：

  const selectTrigger = screen.getByTestId('icon-select');
  fireEvent.click(selectTrigger);
  const targetOption = screen.getByText('Test'); // 替换为实际要选择的选项文本
  fireEvent.click(targetOption);
  

• 直接调用组件的onChange方法
  如果只是验证onChange内的业务逻辑，可以直接获取组件实例并调用其onChange方法，传入匹配结构的参数：

  const selectComponent = screen.getByTestId('icon-select');
  selectComponent.props.onChange({ value: 'Test' }); // 参数结构要和组件onChange接收的一致
  

• 同步Formik字段值（可选）
  你代码里同时使用了{...field}和自定义onChange、value，可能会导致Formik的字段更新逻辑被覆盖。如果需要让Formik同步选中值，要在自定义onChange里调用field.onChange：

  onChange={(item) => {
    handleSample();
    dispatch(abcd(index, "icon", item.value));
    field.onChange(item.value); // 将选中值同步到Formik的values中
  }}
  

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