如何使用纯javascript和Jest测试单击事件

我正在尝试用普通javascript测试一个非常简单的增量函数

此函数有一个带有单击事件的按钮，它触发输入，将一个值相加

我试图寻求帮助，思考如何解决这个问题。我想也许我应该为按钮创建一个模拟（而不是访问DOM元素），并用Ezyme模拟click事件（但我不知道是否真的有必要）

我在搜索中所能得到的只是使用React或Angular中的组件进行的玩笑测试，这使我的问题复杂得多，因此我没有得到简单JS的答案。Jest文档也没有帮助

我的功能代码是：

const increment = () => {
  $increment.addEventListener("click", function() {
    if (+$quantity.value < 100) {
      $quantity.value = +$quantity.value + 1;
    }
  });
};

const increment=（）=>{
$increment.addEventListener（“单击”，函数（）{
如果（+$quantity.value<100）{
$quantity.value=+$quantity.value+1；
}
});
};

---

完整的代码就在上面。

Hokay所以，我的JavaScript有点生疏，但我想我知道查看代码的问题（顺便说一句，谢谢你，它让这个方法更容易解决）

您需要模拟的直觉是正确的，但是现在您的

增量

函数的工作方式是与本地范围内的

$increment

相耦合的（这使模拟变得真正不可行）。您希望将

$element

传递到

increment

函数中，然后将事件侦听器添加到该函数中，而不是使用局部范围中的私有变量将事件侦听器绑定到该函数

const increment = ($element) => {
  $element.addEventListener("click", function() {
    if (+$quantity.value < 100) {
      $quantity.value = +$quantity.value + 1;
    }
  });
};

正如事件监听器中代码的注释一样，我建议也将它

$quantity

传递到函数中，而不是从本地上下文/范围/无论它在javascript中到底调用了什么（即我们使用

$element

所做的事情）捕获它。。。它将使测试变得越来越容易，并使您的功能更加健壮

希望这有帮助

// In your test setup, or in the test itself

const myMockElement = {
  addEventListener: jest.fn(),
};

// Later in your test

increment(myMockElement);

expect(myMockElement.addEventListener.mock.calls.length).toBe(1);