javascript - 如何使用 Jest 单元测试触发 transitionend

Question

我正在使用 Angular 8 和 Jest 进行单元测试。我在元素上为“transitionend”添加了一个监听器，但我一直无法弄清楚如何使用 Jest 触发/模拟 transitionend 事件

this.animatedElement.nativeElement.addEventListener('transitionend', () => {
      this.transitionEnded = true;
});

我正在尝试创建一个单元测试来测试 this.transitionEnded 是否为真

Answer 1

使用这个辅助函数来触发任何事件:

function triggerTransitionEnd(element) {
   let event = document.createEvent("Event");
   event.initEvent("transitionend", true, true);
   element.dispatchEvent(event);
}

然后在你的测试中像这样使用它:

test("Some description here", () => {
    const popup = document.getElementById("popup");
    triggerTransitionEnd(popup);
    expect(popup.classList.contains("show")).toBeFalsy();
});