Question

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

此函数具有一个带有click事件的按钮，该按钮触发输入以将其值加一。

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

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

我的函数的代码是：

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

完整的代码在此codesandbox上。

Answer 1

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

您本来需要模拟的本能是正确的，但是现在，您的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传递给函数，而不是从本地上下文/范围/ hell-its-完全称为javascript（即我们对$element所做的事情）...它将使测试变得更加容易，使测试变得更加容易，并使您的功能更强大。

希望这会有所帮助！

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

1 个答案: