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

Question

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

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

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

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

它检查用户输入，在 changeContent 方法中它只检查长度等。 有谁知道我应该如何做到这一点？

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

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

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

Answer 1

您可以使用spy 来测试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');
    });
});
...