Testen Sie, ob ein Listener mit dem erwarteten CustomEvent() aufgerufen wird.

Heute wurde mir klar, dass wir bei einem Test (Jest) ein Problem hatten

Wir haben eine Funktion, die CustomEvents ausgibt

In unserem Jest-Test definieren wir einen Listener und prüfen, ob er mit dem erwarteten Ereignis aufgerufen wird

---

Ich habe versucht, das Detail (das interne Objekt) des benutzerdefinierten Ereignisses zu ändern

... und der Test wurde trotzdem bestanden?

  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);
  });

Das Problem ist, dass diese Zeile nicht wie erwartet funktioniert (es liegt an der Serialisierung der Ereignisse)

  expect(listener).toHaveBeenCalledWith(expectedEvent)

Um dieses Problem zu lösen (und dafür zu sorgen, dass unser Test die Details des Ereignisses überprüft), sollten wir „mock.calls“ wie folgt verwenden:

  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
  });

--
Danke fürs Lesen.

Das obige ist der detaillierte Inhalt vonTesten Sie, ob ein Listener mit dem erwarteten CustomEvent() aufgerufen wird.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!