DEV Community

Manuel Artero Anguita 🟨
Manuel Artero Anguita 🟨

Posted on β€’ Edited on

Test that a js-listener is called with expected CustomEvent()

Today I realized we had an issue in a test (Jest)

We have a function that emits CustomEvents

In our Jest test, we define a listener and check that it's called with the expected event


I tried changing the detail (the internal object) of the custom event

... and the test was still passing πŸ€”

  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);
  });
Enter fullscreen mode Exit fullscreen mode

The problem is this line won't work as expected (its an issue related with the serialization of the Events)

  expect(listener).toHaveBeenCalledWith(expectedEvent)
Enter fullscreen mode Exit fullscreen mode

In order to solve this (and make our test does check the detail of the event) we should use "mock.calls" as:

  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
  });
Enter fullscreen mode Exit fullscreen mode

--
thanks for reading.

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post β†’

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up