如何为JavaScript Web自定义组件的addEventListener编写单元测试用例

DevOps 小满

2026-9-27

解决方案

1. 修复原组件的事件绑定顺序问题

你当前的userCard.js存在逻辑错误：绑定click事件时，this.clickFunction还未完成定义，传入监听的是undefined，事件触发后不会执行回调，需要调整代码顺序：

// 先定义回调函数
this.clickFunction = () => {
    console.log("inside of clickFunctions")
};
// 再绑定事件监听
this.reasonElem.addEventListener('click', this.clickFunction, false);

2. 编写点击事件测试用例

你已经引入了jsdom依赖，不需要额外mock元素的addEventListener方法，直接模拟目标元素的点击事件即可，在你的测试文件中新增以下用例：

test('点击reason元素触发clickFunction回调', () => {
    // 监听clickFunction调用情况
    jest.spyOn(sut, 'clickFunction');
    // 模拟触发click事件
    sut.reasonElem.dispatchEvent(new Event('click'));
    // 断言回调已被调用
    expect(sut.clickFunction).toHaveBeenCalled();
});

如果需要验证回调的输出逻辑，可以新增对console.log的监听用例：

test('clickFunction输出正确的日志内容', () => {
    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
    sut.reasonElem.dispatchEvent(new Event('click'));
    expect(consoleSpy).toHaveBeenCalledWith('inside of clickFunctions');
    consoleSpy.mockRestore();
});