Ad

How To Test A Method Dispatching Custom Event

- 1 answer

I have a static method that creates a custom event and dispatches it:

    class MyComponent extends {
       static refreshComponent() {
         const event = new Event('refreshComponent');
         document.dispatchEvent(event);
       }
       render() {
          MyComponent.refreshComponent();
       }
    }

I am trying test as below:

describe('refreshComponent', () => {
    it('should dispatch an event', () => {
      const document = { dispatchEvent: jest.fn() };
      wrapper.refreshGoalsComponent();
      expect(document.dispatchEvent).toHaveBeenCalledWith('refreshComponent');
    });
  });

But the dispatchEvent is not called here, as there is no mock for 'new Event()'. Is there a way to mock it? Please help

Ad

Answer

It's a little clunky looking, but something like this should work if you want to verify an event with the expected type was dispatched:

describe('refreshComponent', () => {
  it('should dispatch an event', () => {
    const dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');

    // Trigger component render here...

    expect(dispatchEventSpy).toHaveBeenCalledWith(expect.any(Event));
    expect(dispatchEventSpy.mock.calls[0][0].type).toBe('refreshComponent');
  });
});
Ad
source: stackoverflow.com
Ad