Jest:测试是否调用了来自addEventListener的回调函数

在JavaScript中使用Jest测试框架来测试是否调用了来自 addEventListener 的回调函数，你需要使用Jest的模拟功能（mocking）来跟踪函数调用。这通常涉及到模拟（mocking）事件监听器和回调函数，然后触发事件以确保回调被调用。

下面是一个简单的示例，展示如何设置测试，以确保当特定事件发生时，回调函数被调用。

步骤 1: 设置你的环境

首先，确保你的项目已经安装了Jest。如果还没有安装，你可以通过npm安装：

npm install --save-dev jest

步骤 2: 编写代码

假设你有一个模块，它为一个元素添加事件监听器。这里是一个简单的示例：

// eventModule.js
function setupClickListener(element, callback) {
  element.addEventListener('click', callback);
}

export { setupClickListener };

步骤 3: 编写测试

在你的测试文件中，你将需要模拟 addEventListener 方法，然后验证回调是否在触发事件时被调用。

// eventModule.test.js
import { setupClickListener } from './eventModule';

describe('setupClickListener', () => {
  it('should call the callback when the click event is triggered', () => {
    // 创建一个模拟的元素和回调函数
    const mockElement = {
      addEventListener: jest.fn()
    };
    const mockCallback = jest.fn();

    // 设置监听器
    setupClickListener(mockElement, mockCallback);

    // 检查是否为click事件添加了监听器
    expect(mockElement.addEventListener).toHaveBeenCalledWith('click', expect.any(Function));

    // 获取addEventListener调用的第二个参数（即回调函数），并调用它
    const eventListenerCallback = mockElement.addEventListener.mock.calls[0][1];
    eventListenerCallback();

    // 验证回调函数是否被调用
    expect(mockCallback).toHaveBeenCalled();
  });
});

解释

模拟元素和回调：创建一个包含 addEventListener 方法的模拟对象和一个模拟的回调函数。
设置监听器：调用 setupClickListener，传入模拟的元素和回调。
验证监听器添加：使用 toHaveBeenCalledWith 确保 addEventListener 被正确调用，且被调用时使用了正确的参数（'click' 和一个函数）。
触发回调：从 addEventListener 的模拟调用中检索回调函数并执行它。
检查回调执行：确认回调函数在事件触发时被调用。