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

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

• javascript
• reactjs
• dom
• jestjs
• enzyme

3 Answers 3

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 ponent render here...

    expect(dispatchEventSpy).toHaveBeenCalledWith(expect.any(Event));
    expect(dispatchEventSpy.mock.calls[0][0].type).toBe('refreshComponent');
  });
});

You can test dispatch event like this:

describe('refreshComponent', () => {
  it('should dispatch an event', () => {
    jest.spyOn(global, 'Event').mockImplementation((type: string, eventInit?: any) => ({ type, eventInit }));
    const mockDispatchEvent = jest.spyOn(document, 'dispatchEvent').mockImplementation(() => true);

    // render your ponent

    expect(mockDispatchEvent).toHaveBeenCalledWith({
      type: 'refreshComponent',
    });
  });
});

This way can expect event type and event init value. If you don't want to expect detail event, we does not need to mock Event and expect like:

expect(mockDispatchEvent).toHaveBeenCalledWith(expect.any(Event));

You can mock globals with Jest:

describe('your test', () => {
  let EventBak
  let documentBak

  beforeAll(() => {
    EventBak = global.Event
    documentBak = global.document
    global.Event = jest.fn()
    global.document = {
      ...global.document,
      dispatchEvent: jest.fn()
    }
  })

  afterAll(() => {
    global.Event = EventBak
    global.document = documentBak
  })

  it('...', () => {
    ...
    expect(global.document.dispatchEvent).toHaveBeenCalled()
  })
})