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

Question

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

此函数有一个带有单击事件的按钮，该按钮触发输入将 1 求和为其值。

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

我在搜索中所能得到的只是使用 React 或 Angular 的组件进行 Jest 测试，这使我的问题更加复杂，因此我没有得到简单 JS 的答案。Jest文档也无济于事。

我的函数的代码是：

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

完整代码在此代码沙箱中。

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传递到函数中，而不是从本地上下文/范围/任何地狱-its-exactly-in-javascript中调用的内容(即我们对$element所做的)捕获它......它将使测试变得非常容易，并使你的函数更加健壮。

希望这有帮助！