測試使用預期的 CustomEvent() 呼叫偵聽器

今天我意識到我們在測試中遇到了問題（開玩笑）

我們有一個發出 CustomEvents 的函數

在我們的 Jest 測試中，我們定義一個偵聽器並檢查它是否使用預期事件呼叫

---

我嘗試更改自訂事件的詳細資訊（內部物件）

...測試仍然通過？

  test('events.voiceEvent() emits "CustomEvent{ lavoiceevent }" event', () => {
    const expectedEvent = new CustomEvent('lavoiceevent', {
      detail: { event: 'USER_SAID_HELLO_ERRRRROR' },
    });

    window.addEventListener('lavoiceevent', listener);
    events.voiceEvent('USER_SAID_HELLO');

    expect(listener).toHaveBeenCalledWith(expectedEvent); // ✅
    expect(listener).toHaveBeenCalledTimes(1);
  });

問題是這條線無法如預期般運作（這是與事件序列化相關的問題）

  expect(listener).toHaveBeenCalledWith(expectedEvent)

為了解決這個問題（並使我們的測驗確實檢查事件的細節），我們應該使用「mock.calls」：

  test('events.voiceEvent() emits "CustomEvent{ lavoiceevent }" event', () => {
    const listener = jest.fn();
    window.addEventListener('lavoiceevent', listener);

    events.voiceEvent('USER_SAID_HELLO');

    expect(listener).toHaveBeenCalledTimes(1);
    expect(listener).toHaveBeenCalledWith(expect.any(CustomEvent));

    const ev = listener.mock.calls[0][0];
    expect(ev.type).toBe('lavoiceevent');
    expect(ev.detail.event).toBe('USER_SAID_HELLO'); // ? will fail otherwise
  });

--
感謝您的閱讀。

以上是測試使用預期的 CustomEvent() 呼叫偵聽器的詳細內容。更多資訊請關注PHP中文網其他相關文章！