如何调用组件的 onClick 属性进行测试？答案

【问题标题】：How to call a component's onClick prop for testing purposes?如何调用组件的 onClick 属性进行测试？
【发布时间】：2020-12-01 16:08:28
【问题描述】：

我正在使用 Jest 和 Enzyme 来测试一些 React 组件（使用 TypeScript 编写）。我的旧方法是使用 Enzyme 的 .simulate() 函数来模拟点击，但不赞成使用实例道具函数（即仅使用组件的 onClick() 道具）。但是，我不确定如何直接调用onClick() 函数。以下是我的代码：

// Get the onClick function
const buttonOnClick = wrapper.find('#diffpicker-button').first().props().onClick; 

// buttonOnClick could be a function or undefined, make sure its a function
if (!buttonOnClick) return; 

// Assignment needed here, but to what?
let event: React.MouseEvent<Element, MouseEvent>;

// How to call it?
buttonOnClick(event);

我需要将我的事件变量分配给buttonOnClick()，但我应该将它分配给什么？ onClick 事件实际上是什么样的？或者，我是不是把这一切都搞错了？

【问题讨论】：

您的组件中真的需要 onClick 事件吗？我看到你的代码应该是正确的。如果您需要一个事件对象，那么您可以传递一个带有您在处理程序中使用的字段的对象）
另外，如果你提供组件的代码和完整的测试用例（因为我没有看到任何错误）我会深入研究）
stackoverflow.com/questions/43747397/…
这能回答你的问题吗？ Simulate a button click in Jest
@Boykov 当我不包含一个事件时，它会给出一个错误，说我需要一个。

标签： javascript reactjs typescript jestjs enzyme

【解决方案1】：

您可以尝试为组件分配一个 React 引用并在 ref.current 上调用 click()，以便组件被点击，onClick 处理程序在正确的位置使用所有正确的参数被调用:)。像这样的：

const clickButton = buttonRef => {
   buttonRef.current.click();
}

当然，您可以将 ref 分配给按钮元素，就像这样（Hooks）：

const buttonRef = React.useRef(null);

...

return <button ref={buttonRef} ... />;

【讨论】：

【解决方案2】：

您可以使用如下模拟事件定义直接调用onClick：

// arrange
const event = {
  preventDefault: jest.fn(),
};

// act
wrapper.find("MobileLink").last().props().onClick(event);

// assert
.
.
.

【讨论】：

当我这样做时，它给出了一个错误：'MouseEvent' 类型的参数不可分配给'MouseEvent' 类型的参数。
您可能需要将模拟事件创建为 MouseEvent： const mockEvent = new MouseEvent('click', { bubbles: true, cancelable: true, view: window, });