如何出于测试目的调用组件的onClick道具？

编程问答 2022-08-23

问题描述

我正在使用Jest和Enzyme测试一些React组件（使用TypeScript编写）。我以前的方法是使用酶的.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事件实际上是什么样的？还是我要把这全部弄错？

解决方法

您可以尝试将React引用分配给组件，并在GLMMadaptive上调用click()，以便单击组件，并使用所有正确的参数调用ref.current处理程序正确的地方：）。像这样：

onClick

您当然需要将ref分配给button元素，就像这样（Hooks）：

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

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

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

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

// assert
.
.
.
enzymejavascriptjestjsreactjsreactjstypescripttypescript