如何在Cypress中为EventSource伪造消息触发redux-saga监听逻辑

问题根因 #

EventTarget.dispatchEvent 方法要求传入符合DOM Event规范的实例对象，你当前传入普通JS对象属于无效调用，不会触发eventSrc.onmessage监听回调。redux-saga的channel没有收到任何消息输入，因此抛出了undefined action的错误。

修复方案 #

修改自定义Cypress命令，构造标准的MessageEvent实例再分发即可：

Cypress.Commands.add("sendSSE", sse => {
  cy.window()
    .its("eventSrc")
    .then(eventSrc => {
      const sseMessage = new MessageEvent("message", {
        data: JSON.stringify(sse),
        lastEventId: "",
        origin: "http://localhost:3000"
      });
      eventSrc.dispatchEvent(sseMessage);
    });
});

如果仍然有触发问题，可以直接手动调用onmessage回调函数，绕开Event分发的校验逻辑，更适合测试场景使用：

Cypress.Commands.add("sendSSE", sse => {
  cy.window()
    .its("eventSrc")
    .then(eventSrc => {
      const mockMsg = {
        data: JSON.stringify(sse),
        lastEventId: "",
        origin: "http://localhost:3000"
      };
      eventSrc.onmessage(mockMsg);
    });
});

注意事项 #

调用sendSSE命令前需要确保页面已经完成EventSource实例的初始化、且已经挂载到window.eventSrc上，可以加合适的等待逻辑避免拿到undefined的实例。

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