Testez qu'un écouteur est appelé avec CustomEvent() attendu

Aujourd'hui, j'ai réalisé que nous avions un problème dans un test (Jest)

Nous avons une fonction qui émet des CustomEvents

Dans notre test Jest, nous définissons un écouteur et vérifions qu'il est appelé avec l'événement attendu

---

J'ai essayé de changer le détail (l'objet interne) de l'événement personnalisé

... et le test réussissait toujours ?

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

Le problème est que cette ligne ne fonctionnera pas comme prévu (c'est un problème lié à la sérialisation des événements)

  expect(listener).toHaveBeenCalledWith(expectedEvent)

Afin de résoudre ce problème (et de faire en sorte que notre test vérifie les détails de l'événement), nous devons utiliser "mock.calls" comme :

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

--
merci d'avoir lu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!