我正在尝试在 vanilla javascript 中测试一个非常简单的增量函数。
此函数有一个带有点击事件的按钮,该事件会触发输入对其值求和。
我试图寻求帮助来思考如何解决这个问题。我想也许我应该为按钮创建一个模拟(而不是访问 DOM 元素),并用 Enzyme 模拟点击事件(但我不知道是否真的有必要)。
我在搜索中所能得到的只是使用来自 React 或 Angular 的组件的 Jest 测试,这使我的问题更加复杂,因此我没有得到简单 JS 的答案。 Jest 文档也没有帮助。
我的函数代码是:
const increment = () => {
$increment.addEventListener("click", function() {
if (+$quantity.value < 100) {
$quantity.value = +$quantity.value + 1;
}
});
};
完整代码在这个 codesandbox 上.
最佳答案
好的,我的 JavaScript 有点生疏,但我想我知道查看代码的问题(顺便说一句,谢谢你,它让这种方式更容易弄清楚)......
您需要模拟的直觉是正确的,但是现在您的 increment
函数的工作方式与本地范围内的 $increment
耦合(使其 mock 真的很无趣)。您想将 $element
传递给 increment
函数,然后添加事件监听器,而不是在本地范围内使用私有(private)变量来绑定(bind)事件监听器
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-exactly-called-in-javascript(即我们用 $element
所做的)...它将使测试变得非常非常容易测试,并使您的功能更加健壮。
希望这对您有所帮助!
关于javascript - 如何使用纯javascript和Jest测试点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56892762/