如何在Cypress测试中验证TypeScript派发的自定义事件？

• 监听自定义事件
  通过cy.window()拿到页面的window对象，用cy.spy()创建一个监听器并绑定到目标事件上，方便后续断言：

  cy.window().then(win => {
    const eventSpy = cy.spy().as('myCustomEventSpy');
    win.addEventListener('myCustomEvent', eventSpy);
  });
  

• 触发页面逻辑并断言
  先让页面完成加载（或者触发触发事件的操作），然后通过之前设置的别名获取监听器，验证事件是否触发以及数据是否符合预期：

  // 访问目标页面，等待事件触发
  cy.visit('/your-page-path');
  // 可以等待页面特定元素加载完成，确保事件已派发
  cy.get('#trigger-element').should('be.visible');
  
  // 断言事件至少被调用一次
  cy.get('@myCustomEventSpy').should('have.been.called');
  
  // 验证事件携带的id数据
  cy.get('@myCustomEventSpy').then(spy => {
    const event = spy.firstCall.args[0];
    // 注意：CustomEvent的自定义数据默认存放在detail属性中
    expect(event.detail.id).to.equal(123);
  });
  

• 关键提醒
  你的原TypeScript代码里创建CustomEvent时，自定义数据必须放在detail字段里，否则事件对象无法正确携带id，修正后的代码：

  dispatchEvent() {
    const myCustomEvent = new CustomEvent('myCustomEvent', {
      detail: { id: 123 } // 数据需放在detail中
    });
    this.dispatchEvent(myCustomEvent);
  }
  

  如果事件是在某个DOM元素上派发的（不是window），就需要获取对应元素来监听，比如：

  cy.get('#target-dom-element').then(el => {
    const eventSpy = cy.spy().as('elementEventSpy');
    el[0].addEventListener('myCustomEvent', eventSpy);
  });
  

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