Jest中fireEvent.click()如何传递点击事件参数？

核心问题 #

1. 组件逻辑限制：你的按钮onClick是硬编码调用handleApplyClick("890")，不管点击事件传入什么参数，都会固定传递"890"，所以测试里通过fireEvent.click传递的target.value根本不会被handleApplyClick接收。
2. 测试逻辑错误：测试中重复调用了render(<Searchmodal />)，第二次render会创建全新的组件实例，和你之前点击按钮操作的实例无关，自然拿不到预期的input.value。

修正步骤 #

1. 调整组件的onClick逻辑

如果需要让handleApplyClick能接收点击事件的参数（或自定义参数），需修改按钮的onClick绑定方式：

• 方式一：让handleApplyClick接收事件对象，从事件中取目标值（适合按钮本身带value属性的场景）

<button
  id="datasource-link-apply-button"
  data-testid="test-button"
  type="secondary"
  value="123" // 可设置默认值或从props传入
  onClick={(e) => handleApplyClick(e.target.value)}
>
  Apply
</button>

• 方式二：通过自定义事件属性传递参数（适合需要从测试端传入自定义值的场景）

<button
  id="datasource-link-apply-button"
  data-testid="test-button"
  type="secondary"
  onClick={(e) => handleApplyClick(e.detail)} // 从事件detail取自定义参数
>
  Apply
</button>

2. 修正测试代码

• 仅render一次组件，操作同一个实例
• 根据组件的修改方式，正确传递参数：

对应方式一的测试代码：

expect(Searchmodal).toBeDefined();
// 只渲染一次组件
const { getByPlaceholderText } = render(<Searchmodal visible={true} />);
const button = screen.getByTestId("test-button");
const parameter = "123";

// 先修改按钮的value值
fireEvent.change(button, { target: { value: parameter } });
// 触发点击
fireEvent.click(button);

const input = getByPlaceholderText("Search");
expect(input.value).toBe(parameter);

对应方式二的测试代码：

expect(Searchmodal).toBeDefined();
const { getByPlaceholderText } = render(<Searchmodal visible={true} />);
const button = screen.getByTestId("test-button");
const parameter = "123";

// 通过detail传递自定义参数
fireEvent.click(button, { detail: parameter });

const input = getByPlaceholderText("Search");
expect(input.value).toBe(parameter);

额外提示 #

如果handleApplyClick依赖组件内部状态，React Testing Library的fireEvent和screen会自动处理状态更新后的断言，一般无需手动调用act（特殊异步逻辑除外）。

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