如何使用纯JavaScript和Jest测试点击事件

Question

我正在尝试在香草javascript中测试一个非常简单的增量函数。

该功能有一个带有单击事件的按钮，该按钮触发输入以将其值加一。

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

我所能找到的只是使用来自React或Angular的组件进行的Jest测试，这使我的问题更加复杂，因此对于简单的JS我没有任何答案。 Jest文档也没有帮助。

我函数的代码是：

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

完整的代码在该codeandbox上 。

Answer 1

好的，我的JavaScript有点生锈，但是我想我知道查看代码的问题（顺便说一句，谢谢您，它使这种方式更容易弄清楚）...

您需要模拟的本能是正确的，但是现在您的increment函数的工作方式与$increment耦合，该$increment在本地范围内（使模拟变得毫无乐趣）。 您不想在本地范围内使用私有变量将事件侦听器绑定到，而是希望将$element传递给increment函数，然后向其添加事件侦听器。

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

现在，在您的测试中，您可以创建一个带有addEventListener函数的模拟程序...以下内容可能不太正确，但我认为应该可以最大限度地帮助您：

// 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);

就像事件监听器中的代码说明一样，我建议也将$quantity传递给函数，而不是从本地上下文/范围/确切地称为“ in-in-” javascript（即我们对$element所做的事情）...它将使测试变得更加容易，而且更易于测试，并使您的功能更强大。

希望这可以帮助！