使用React Testing Library测试时fireEvent.click未触发如何排查？

你测试代码传入的prop名称和组件内部接收的prop名称不匹配：

• 测试代码中给QuoteButton组件传入的是onClick属性
• 组件内部解构参数时只接收了collect属性，没有接收onClick，因此按钮绑定的onClick={collect}实际是undefined，点击自然不会触发你的mock函数。

方案1：调整组件prop命名（更符合常规命名习惯） #

修改组件接收的prop为onClick：

const QuoteButton = ({ children, onClick }) => {
    return <StyledButton data-testid="quoteButton" onClick={onClick}>{children}</StyledButton>
}

方案2：调整测试传入的prop名称 #

修改测试代码里给组件传的属性名为collect：

render(<QuoteButton collect={mockCollect}>get a quote</QuoteButton>);

如果修改后仍有问题可以进一步检查：

• 确认你查询到的按钮元素是目标元素：可以在获取buttonElement后打印buttonElement.textContent确认文本匹配，避免查询到其他隐藏的按钮
• React Testing Library目前更推荐使用@testing-library/user-event库模拟用户点击，相比fireEvent更贴近真实用户交互行为，结果更可靠
• 确认按钮没有被设置disabled属性，禁用状态下点击不会触发事件

内容的提问来源于stack exchange，提问作者fluffy-lionz