时间戳

首页 > 解决方案 > 如何使用 vanillajs 和 nodejs 在 Mocha/Chai/Sinon 中测试 addEventListener？

javascript - 如何使用 vanillajs 和 nodejs 在 Mocha/Chai/Sinon 中测试 addEventListener？

问题描述

我对 Mocha 测试检查输入的事件侦听器有疑问。我的环境是用纯 javascript、nodejs 和 mocha/chai/sinon 进行测试。我写了一些其他正在运行的测试，基本上是检查功能，但测试命中“无法读取 null 的属性 'addEventListener'”。

由于我对测试很陌生，所以我在文档中进行了研究，添加了 JSDOM 等，但没有运气。我根本不知道如何检查事件监听器。许多已经可用的线程都是 React 环境，它们似乎有某种内置的应用程序可以帮助它们，但不是我。

所以基本上是这样，真的缩小了：

const userInput = document.querySelector("#userInfo");
userInput.addEventListener("input", changeContent);

它检查用户输入，并在 changeContent 方法中检查长度等。关于我应该如何做到这一点的任何接受者？

编辑： “跳过”我的问题的轻微解决方法，但无论如何学习如何在测试中解决它会很好。这样测试就通过了（因为它忽略了它）。

解决方法，因为测试点 eventListener 为空：

if(userInput){
  userInput.addEventListener("input", changeContent)
}

标签： javascriptnode.jsmocha.jssinonchai

解决方案

您可以使用 aspy来测试是否addEventListener被调用。没有具体的理由来测试addEventListener.

此外，您必须伪造document.querySelector并强制它返回 HTMLElement。

长话短说：

使用间谍addEventListener：https ://sinonjs.org/releases/v7.3.2/spies/

使用假货document.querySelector：https ://sinonjs.org/releases/v7.3.2/

间谍示例 console.log：

// method implementend in your project
function log() {
   console.log('Hello world');

}

// log.spec.ts

...
describe('whatever test suite', () => {
    it('test log', () => {
        const consoleSpy = Sinon.spy(console, 'log');
        log();

        Sinon.assert.calledWith(consoleSpy, 'Hello world');
    });
});
...

推荐阅读