React Testing Library中fireEvent.click()返回值说明及真假场景

fireEvent.click() 的返回值表示点击事件是否成功触发且默认行为未被阻止，核心是判断目标元素的点击操作是否完成了预期的事件流且没有被拦截。

返回 true 的场景 #

• 目标元素支持点击交互（如按钮、链接、设置了 cursor: pointer 的可点击容器），且事件处理函数中未调用 event.preventDefault()
• 元素未处于禁用状态（比如按钮的 disabled 属性为 false）
• 点击操作未被捕获/冒泡阶段的其他事件处理逻辑阻止默认行为

返回 false 的场景 #

• 事件处理函数中显式调用了 event.preventDefault()
• 目标元素处于禁用状态（如 <button disabled>、<input type="submit" disabled>）
• 元素被设置为不可交互（比如添加了 pointer-events: none 样式的元素、纯文本节点）
• 点击事件被上层元素的事件拦截逻辑阻止了默认行为

举个实际代码示例：

// 返回 true 的情况
const activeButton = screen.getByRole('button');
const result1 = fireEvent.click(activeButton); // 按钮可用，无阻止逻辑，返回true

// 返回 false 的情况
const disabledButton = screen.getByRole('button', { disabled: true });
const result2 = fireEvent.click(disabledButton); // 按钮禁用，返回false

const link = screen.getByRole('link');
const result3 = fireEvent.click(link, {
  preventDefault: () => {} // 模拟事件内调用preventDefault
}); // 返回false

日常测试中，不建议依赖这个返回值断言业务逻辑，更推荐通过验证组件状态变化、DOM更新或用户可见的反馈来确认点击效果。

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