JS 中自定义事件监听怎么编写完整的异步测试-js教程-PHP中文网

js自定义事件异步测试核心是控制事件触发时机、验证监听器执行、等待并断言异步流程；需用promise链而非settimeout，结合jest.fn()、async/await及mock实现精准断言。

js 中自定义事件监听怎么编写完整的异步测试

JS 中自定义事件监听的异步测试，核心在于：确保事件触发时机可控、监听器执行可验证、异步流程（如 Promise、setTimeout、fetch 模拟）能被正确等待和断言。

1. 基础准备：创建可测试的自定义事件逻辑

先封装一个支持自定义事件触发与监听的类，避免直接操作 DOM 事件（便于隔离测试）：

class EventEmitter {
  constructor() {
    this.events = new Map();
  }
  on(type, listener) {
    if (!this.events.has(type)) this.events.set(type, []);
    this.events.get(type).push(listener);
  }
  emit(type, detail) {
    const listeners = this.events.get(type) || [];
    listeners.forEach(fn => fn({ type, detail }));
  }
  // 可选：返回 Promise 的 emitAsync，模拟异步事件分发
  async emitAsync(type, detail) {
    await Promise.resolve(); // 模拟微任务延迟
    this.emit(type, detail);
  }
}

2. 使用 Jest 编写完整异步测试（推荐方案）

Jest 原生支持异步测试，配合 done 回调、async/await 或 return Promise 均可。推荐用 async/await + jest.fn() 验证监听器是否被调用：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

用 jest.fn() 创建监听器，并断言其被调用及参数
若事件触发本身是异步的（如 emitAsync），直接 await 触发动作
避免使用 setTimeout 等不可靠延时，优先依赖事件逻辑自身的 Promise 链

const { EventEmitter } = require('./event-emitter');

test('emitAsync 正确触发异步监听器', async () => {
  const emitter = new EventEmitter();
  const listener = jest.fn();

  emitter.on('data', listener);
  
  // 触发异步事件
  await emitter.emitAsync('data', { id: 123 });

  // 断言监听器被调用一次，且参数正确
  expect(listener).toHaveBeenCalledTimes(1);
  expect(listener).toHaveBeenCalledWith({
    type: 'data',
    detail: { id: 123 }
  });
});

3. 测试带真实异步副作用的监听器（例如 fetch）

当监听器内部执行异步操作（如调用 API），需在测试中 mock 外部依赖，并等待监听器完成：

用 jest.mock('node-fetch') 或 fetch.mockResolvedValue() 模拟请求
监听器返回 Promise？可在测试中 await 它的执行（需确保监听器暴露可 await 的入口）
更稳妥做法：监听器执行后 resolve 一个信号（如返回 Promise 或更新某个状态）

// 监听器示例（返回 Promise）
emitter.on('fetch-user', async ({ detail }) => {
  const res = await fetch(`/api/users/${detail.id}`);
  return res.json();
});

test('监听器内 fetch 被正确调用并返回数据', async () => {
  const mockJson = { name: 'Alice' };
  fetch.mockResolvedValue({
    json: jest.fn().mockResolvedValue(mockJson)
  });

  const emitter = new EventEmitter();
  let result;
  emitter.on('fetch-user', async (e) => {
    result = await e.detail.handler(e.detail.id); // 假设 handler 是注入的 fetch 封装
  });

  await emitter.emitAsync('fetch-user', { id: 456 });

  expect(fetch).toHaveBeenCalledWith('/api/users/456');
  expect(result).toEqual(mockJson);
});