Jest - как проверить функцию, добавленную вызовом addEventListener

Question

Я сделал расширение браузера, которое вставляет javascript на страницу, к которой обращается пользователь, это javascript создает меню (div), в котором есть кнопка переключения, которая заставляет его расширяться или убираться. Код, который создает это меню, представляет собой фабрику, которая получает строку, которая будет идентификатором меню, и возвращает объект с функцией инициализации, отвечающей за внедрение меню на странице, к которой пользователь обращается, и функцией, которая отображает некоторый контент в меню. .

Я новичок в JavaScript тестировании и шутке, проблема, с которой я столкнулся, заключается в том, чтобы протестировать функцию, добавленную eventListener.

   document.getElementById(sideMenuInfo.toggleId).addEventListener('click', toggle);

когда я запускаю свой test выглядит так, как будто функция переключения не была вызвана.

it('check toggleClick change SideMenu class', () => {
    const sideMenu = BuildSideMenu({ SideMenuRootDivId: 'rootDivId' });
    sideMenu.init();

    const elementBefore = document.getElementById(rootDivId);

    $('#axr-ext-menu-toggle').click();

    const elementAfter = document.getElementById(rootDivId);

    expect(elementBefore.classList.contains('axr-ext-menu-close')).toBeTruthy(); // fail
    expect(elementAfter.classList.contains('axr-ext-menu-open')).toBeTruthy(); // fail 
  });

Это код, который я пытаюсь проверить, вы думаете, есть ли способ проверить функцию переключения?

function BuildSideMenu({ SideMenuRootDivId }) {
  const sideMenuInfo = {
    id: SideMenuRootDivId,
    toggleId: 'axr-ext-menu-toggle',
    contentId: 'axr-ext-menu-content',
    toggleCloseClass: 'axr-ext-menu-close',
    toggleOpenClass: 'axr-ext-menu-open',
  };

  const baseTemplate = '<div >'
    + `<a id="${sideMenuInfo.toggleId}" class="${sideMenuInfo.toggleId}" href="javascript:void(0)" >&times;</a>`
    + `<div id="${sideMenuInfo.contentId}"></div></div>`;

  const render = (templateLayout, node = document.getElementById(sideMenuInfo.contentId)) => {
    if (!node) return;
    // eslint-disable-next-line no-param-reassign
    node.innerHTML = typeof templateLayout === 'function' ? templateLayout() : templateLayout;
  };

  function toggle() {
    const sideMenu = document.getElementById(sideMenuInfo.id);
    const sideNavStrap = document.getElementById(sideMenuInfo.sideStrapId);

    if (sideMenu.classList.contains(sideMenuInfo.toggleOpenClass)) {
      sideMenu.classList.add(sideMenuInfo.toggleCloseClass);
      sideMenu.classList.remove(sideMenuInfo.toggleOpenClass);
    } else {
      sideMenu.classList.add(sideMenuInfo.toggleOpenClass);
      sideMenu.classList.remove(sideMenuInfo.toggleCloseClass);
    }
  }

  const createAndAppendSideMenuOnDocument = () => {
    const sideMenu = document.createElement('div');
    sideMenu.setAttribute('id', sideMenuInfo.id);
    sideMenu.setAttribute('class', sideMenuInfo.toggleCloseClass);
    document.body.appendChild(sideMenu);
  };


  function addToggleOnMenu() {
    render(baseTemplate, document.getElementById(sideMenuInfo.id));
    document.getElementById(sideMenuInfo.toggleId).addEventListener('click', toggle);
  }

  const init = () => {
    createAndAppendSideMenuOnDocument();
    addToggleOnMenu();
  };

  return Object.freeze({
    init, render, sideMenuInfo,
  });
}


const sideMenu = BuildSideMenu({SideMenuRootDivId: 'rootDiv'}); 
sideMenu.init();
sideMenu.render("<h1>ahoy</h1>")

#rootDiv {
  height: 100%;
  position: fixed;
  z-index: 2147483646;
  top: 0;
  right: 0;
  
  transition: 0.5s;
  border-style: solid;
  border-color: #ff5824;
  background-color: rgba(0, 0, 0, 0.1);
}

.axr-ext-menu-close {
  width: 25px;
}

.axr-ext-menu-open {
  width: 250px;
}