如何用Jest测试点击事件？回调未触发测试失败求助

问题根源 #

你在测试中遇到的第二个断言失败，核心原因是：app.js里的testEvents函数直接绑定了本地定义的callOnClick函数，而jest.spyOn(app, 'callOnClick')监视的是你通过module.exports导出的函数引用。这两个是不同的函数实例，所以当点击事件触发时，执行的是未被监视的本地函数，Spy自然捕获不到调用记录。

两种可行的解决方法 #

方法一：修改业务代码，绑定导出的函数 #

让testEvents里的事件回调引用导出对象上的callOnClick，这样Spy就能监视到实际执行的函数：

// app.js
function testEvents() {
  // 替换为module.exports上的callOnClick引用
  document.querySelector('.test1').addEventListener('click', module.exports.callOnClick);
}

function callOnClick() {
  console.log('clicked');
}

module.exports = { testEvents, callOnClick };

方法二：在测试中验证事件绑定逻辑（无需修改业务代码） #

如果不想改动业务代码，可以通过监视DOM元素的addEventListener方法，直接验证是否绑定了正确的回调，再手动触发点击验证效果：

// app.test.js
describe('Event tests', () => {
  afterEach(() => {
    jest.restoreAllMocks();
  });

  it('Test event', () => {
    const testElement = document.querySelector('.test1');
    // 监视DOM元素的addEventListener方法
    const addEventListenerSpy = jest.spyOn(testElement, 'addEventListener');
    
    app.testEvents();
    // 验证是否绑定了click事件和正确的回调
    expect(addEventListenerSpy).toHaveBeenCalledWith('click', app.callOnClick);

    // 手动触发点击，验证回调执行效果
    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
    testElement.click();
    expect(consoleSpy).toHaveBeenCalledWith('clicked');

    consoleSpy.mockRestore();
  })
})

关键原理补充 #

Jest的Spy是通过替换目标对象上的函数引用来工作的，只有当代码中实际调用的是被Spy替换后的引用时，才能捕获到调用记录。如果业务代码直接使用本地函数，Spy无法影响到这个本地引用，就会出现你遇到的“调用次数为0”的问题。

内容的提问来源于stack exchange，提问作者Denis