React Testing Library无法触发Select组件点击事件的解决问询

API 探路者

2026-8-19

问题解决：Chakra UI Select组件测试失败的修复方案

问题根源

测试失败有两个核心原因：

交互模拟方式错误：Chakra UI的<Select>是封装后的组件，直接点击选项文本不会触发原生change事件；
断言参数错误：组件的onChange接收的是标准ChangeEvent<HTMLSelectElement>对象，不是你断言的{label: "AF", value: "AF"}结构。

修正后的测试代码

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import MySelect from "./MySelect";

const mockOnChange = jest.fn();

describe("MySelect", () => {
  it("triggers onChange when selecting a different option", () => {
    const mockProp = {
      value: "AL",
      onChange: mockOnChange
    };
    render(<MySelect {...mockProp} />);

    // 获取原生select元素（通过预设的data-testid）
    const selectElement = screen.getByTestId("dial-code-select");
    
    // 触发change事件，直接设置目标选中值
    fireEvent.change(selectElement, { target: { value: "AF" } });

    // 断言onChange被调用1次
    expect(mockOnChange).toHaveBeenCalledTimes(1);
    
    // 断言事件参数符合ChangeEvent结构
    const changeEvent = mockOnChange.mock.calls[0][0];
    expect(changeEvent.target.value).toBe("AF");
    expect(changeEvent.target.tagName).toBe("SELECT");
  });
});

关键修复点说明

用fireEvent.change替代click：下拉选择组件的标准交互触发方式是触发change事件，而非直接点击选项；
操作原生select元素：通过你设置的data-testid="dial-code-select"获取原生<select>DOM节点，直接修改其value并触发事件；
正确断言事件参数：onChange的参数是完整的ChangeEvent对象，需通过event.target.value获取选中值，而非自定义对象结构。