Как проверить метод отправки пользовательского события

Question

У меня есть статический метод, который создает пользовательское событие и отправляет его:

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

Я пытаюсь проверить, как показано ниже:

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

Но dispatchEvent здесь не вызывается, так как для 'new Event ()' не существует макета. Есть ли способ высмеять это? Пожалуйста, помогите

Answer 1

Вы можете издеваться над глобалом с 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()
  })
})