リスナーが予想される 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 中国語 Web サイトの他の関連記事を参照してください。