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');
    });
});
...

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

1 个答案: