时间戳

首页 > 解决方案 > 如何使用 Jest 单元测试触发 transitionend

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

问题描述

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

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

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

标签： javascriptcssangularunit-testingjestjs

解决方案

使用此辅助函数触发任何事件：

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();
});

推荐阅读