接收自定义onClick prop的React组件RTL单元测试点击无响应排查

核心问题：Prop名称不匹配 #

组件定义中接收的回调prop是onRetry，但测试代码里传递的是onClick，组件内部从未使用onClick属性，所以mock函数完全不会被触发。这是导致测试失败的根本原因。

次要问题：属性类型与查询方法错误 #

• action属性传递了字符串"true"：虽然非空字符串会被判定为真，但组件逻辑预期的是布尔值，传递true更符合组件设计意图，避免潜在类型问题。
• 查询方法使用错误：screen.getElementsByText返回的是HTMLCollection集合，而userEvent.click需要传入单个DOM元素，改用screen.getByText("Retry")可以直接获取目标元素，同时符合React Testing Library的查询规范。
• 异步操作未处理：新版@testing-library/user-event的click方法是异步函数，需要配合await关键字确保操作完成后再进行断言。

修正后的测试代码 #

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React from "react";
import ToasterActionMessage from "./ToasterActionMessage"; // 补充组件导入，确保路径正确

test("triggers onRetry when Retry button is clicked", async () => {
  const mockOnRetry = jest.fn();
  render(<ToasterActionMessage action={true} onRetry={mockOnRetry} message="Test error" />);
  
  await userEvent.click(screen.getByText("Retry"));
  
  expect(mockOnRetry).toHaveBeenCalled();
});

额外说明 #

• 测试代码中遗漏了组件的导入语句，这也是可能导致测试报错的潜在问题，需要补充确保路径正确。
• Jest的toHaveBeenCalled()断言写法比toBeCalled()语义更清晰，功能完全一致，推荐使用。

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