Javascript 酶测试车轮事件

我正在尝试测试车轮事件。我正在加载事件中添加轮子侦听器

this.domElement = document.getElementById('myImg');
if (this.domElement) {
    this.domElement.addEventListener('load', this.load);
}

加载方法如下所示

load() {
     this.domElement.addEventListener('wheel', this.onWheel);
}

未调用此.load方法

我尝试模拟负载：

wrap.find('img').simulate('load');

这也不起作用。如何为wheel事件编写单元测试

---

谢谢。

您不能使用

。模拟
酶的
方法来触发DOM事件。此方法用于触发React
事件，而不是本机DOM事件。而且您不需要为真实DOM测试真实的
轮子
和
加载
事件。这是e2e测试的职责，而不是单元测试的职责

以下是单元测试的解决方案：

index.tsx
：

import React，{Component}来自'React'；
类XComponent扩展了组件{
私人住宅；
建造师（道具）{
超级（道具）；
this.load=this.load.bind（this）；
}
公共组件didmount（）{
this.domeElement=document.getElementById（'myImg'）；
如果（此.domeElement）{
this.domeElement.addEventListener（'load'，this.load）；
}
}
公共负载（）{
this.domeElement.addEventListener（'wheel'，this.onWheel）；
}
公共车轮（）{
//
}
公共渲染（）{
返回XComponent；
}
}
导出默认XComponent；

index.spec.tsx
：

从“React”导入React；
从“/”导入XComponent；
从“酶”导入{shall}；
设map={}；
document.addEventListener=jest.fn（（事件，cb）=>{
map[event]=cb；
});
描述（'XComponent'，（）=>{
让domElementEventMap={}；
常量mockedDomeElement:any={
addEventListener:jest.fn（（事件，cb）=>{
domElementEventMap[事件]=cb；
})
};
之后（（）=>{
jest.resetAllMocks（）；
开玩笑。恢复记忆（）；
map={}；
domElementEventMap={}；
});
它（'应该调用onWheel方法'，（）=>{
const getElementByIdSpy=jest.spyOn（文档“getElementById”）.mockReturnValueOnce（mockedDomeElement）；
常量包装器=浅（）；
expect（wrapper.text（））.toBe（'XComponent'）；
expect（getElementByIdSpy）.toBeCalledWith（'myImg'）；
expect（mockedDomeElement.addEventListener）.toBeCalledWith（'load'，（wrapper.instance（）如有）.load）；
（如有）加载（）；
expect（mockedDomeElement.addEventListener）.toBeCalledWith（'wheel'，（wrapper.instance（）如有）.onWheel）；
});
它（'当dom元素不存在时不应添加加载事件'，（）=>{
const getElementByIdSpy=jest.spyOn（文档'getElementById'）.mockReturnValueOnce（null）；
常量包装器=浅（）；
expect（wrapper.text（））.toBe（'XComponent'）；
expect（getElementByIdSpy）.toBeCalledWith（'myImg'）；
expect（mockedDomeElement.addEventListener）.not.toBeCalled（）；
});
});

具有100%覆盖率报告的单元测试结果：

PASS src/stackoverflow/58028571/index.spec.tsx（13.467s）
XComponent
✓ 应调用onWheel方法（10ms）
✓ 当dom元素不存在时不应添加加载事件（2ms）
-----------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
-----------|----------|----------|----------|----------|-------------------|
所有文件| 100 | 100 | 83.33 | 100 ||
index.tsx | 100 | 100 | 83.33 | 100 ||
-----------|----------|----------|----------|----------|-------------------|
测试套件：1个通过，共1个
测试：2次通过，共2次
快照：共0个
时间：15.545s

源代码：