Reactjs 如何修复'；预期已调用模拟函数，但未调用它'；开玩笑

我想测试是否在“mousedown”事件上调用了类方法。请看下面的代码

这是我的组件：

import React，{Component}来自'React'；
从“样式化组件”导入样式化；
从“/MyChildClass”导入MyChildClass；
导出默认类MyClass扩展组件{
建造师（道具）{
超级（道具）；
//初始状态
此.state={
球：[]
};
this.onMouseUpHandler=this.onMouseUpHandler.bind（this，this.state.balls）；
}
onMouseDownHandler=（球，e）=>{
...
};
render（）{
返回(
{balls}
);
}

这是我的测试：

从“React”导入React；
从“酶”导入{mount，shallow}；
从“../MyClass”导入MyClass；
它（'should call onMouseDownHandler on mouse down'，（）=>{
//…安排
const instance=component.instance（）；
const wrapper=component.find（'.wrapper'）。位于（0）；
instance.setMousePosition=jest.fn（）；
instance.onMouseDownHandler=jest.fn（）；
forceUpdate（）；
component.update（）；
//…表演
wrapper.simulate（'mouseDown'）；
//…断言
expect（instance.onMouseDownHandler）.toHaveBeenCalled（）；
});

因此，我最终希望测试通过，但运行程序仍然返回fail，并显示消息

预期已调用模拟函数，但未调用该函数

---

我在Google上查看了很多示例，发现这是测试事件的正确模式。

使用arrow函数作为类的方法不容易测试。因为它将用作类的属性，而不是类的实例方法。因此我建议您重构该方法

重构后，可以使用监视

onMouseDownHandler

方法

比如说,

index.tsx

：

import React，{Component}来自'React'；
constyledenvironment=（{children，className}）=>{children}；
导出默认类MyClass extends Component
伙计们，实际上，当我清楚地阅读代码时，我看到包装类“wrapper”应该添加到jsx中的div元素，而不是添加到StyledEnvironment组件中……测试的其余部分是可以的，实际上是一个标准模式。谢谢