JS/Jest环境下如何mock video.js的video.off事件移除函数

结论 #

如果只需要验证video.off的调用参数、调用时机，直接写video.off = jest.fn()就足够；如果需要模拟真实的事件绑定移除逻辑、验证回调仅执行一次的效果，就需要实现带事件存储的mock。

方案1：基础验证场景，直接使用空mock函数 #

当你的测试目标仅为确认回调执行后，确实正确调用了video.off并传入了对应参数，不需要模拟多次事件触发的真实效果时，直接初始化空的jest mock函数即可：

// 测试代码示例
const mockOn = jest.fn().mockImplementation((event, callback) => {
  if (event === 'play') {
    callback();
  }
});
// 直接定义off的mock
const mockOff = jest.fn();
const video = {
  on: mockOn,
  off: mockOff
};

// 执行业务代码后做断言
expect(mockOff).toHaveBeenCalledTimes(1);
// 验证参数正确：事件名是play，第二个参数是on方法传入的回调函数
expect(mockOff).toHaveBeenCalledWith('play', mockOn.mock.calls[0][1]);

方案2：模拟真实事件能力的完整mock #

如果你的测试需要验证「play事件多次触发时，回调仅执行一次」的逻辑，就需要让on和off模拟真实的事件绑定、移除能力，实现如下：

// 用对象存储所有事件的监听回调
const eventStore = {};

const mockOn = jest.fn().mockImplementation((event, callback) => {
  if (!eventStore[event]) eventStore[event] = [];
  eventStore[event].push(callback);
  // 按需保留你原来的自动触发play回调的逻辑
  if (event === 'play') callback();
});

const mockOff = jest.fn().mockImplementation((event, callbackToRemove) => {
  if (!eventStore[event]) return;
  // 过滤掉要移除的回调
  eventStore[event] = eventStore[event].filter(cb => cb !== callbackToRemove);
});

// 可选：手动触发事件的工具方法，方便测试多次触发场景
const trigger = (event) => {
  eventStore[event]?.forEach(cb => cb());
};

const video = { on: mockOn, off: mockOff };

用这个实现可以验证回调仅执行一次的效果：

// 执行业务代码后，手动触发第二次play事件
trigger('play');
// 假设你给回调里的doStuff逻辑也做了mock，断言它只被调用1次
expect(doStuffMock).toHaveBeenCalledTimes(1);

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