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);
});
The problem is this line won't work as expected (its an issue related with the serialization of the Events)
expect(listener).toHaveBeenCalledWith(expectedEvent)
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
});
--
thanks for reading.
Top comments (0)