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

标签 javascript unit-testing jestjs

我正在尝试在 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/

相关文章:

javascript - 获取 playlistItems 的 viewCount,组合 HTTP 请求 youtube v3 + JQuery

javascript - 将绝对坐标与 transform translate 一起使用

unit-testing - 如何断言和测试 ReactJS/Fluxible 组件的状态?

reactjs - 在相同的 prop 名称下传递更多值并使用 Jest 进行测试

unit-testing - 如何模拟对 logger.warn 的调用?

javascript - 如何更新附加 div 的数量计数

javascript - 如何为使用jquery动态生成的按钮提供唯一的id

unit-testing - Apache 点燃 : test utilities

javascript - 在对 javascript/NodeJS 应用程序进行原型(prototype)设计时,应该和不应该对哪些内容进行单元测试?

javascript - 使用 Jest 从 Node 模块导入模拟函数的正确方法