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

Question

I have an issue with Mocha testing an eventlistener that checks for input. My environment is with plain javascript, nodejs and mocha/chai/sinon for testing. I wrote some other tests that are working, basically checking functions but the test hits on "Cannot read property 'addEventListener' of null".

Since I'm quite new to testing I've dug around in the documentation, added JSDOM and such but no luck. I simply don't know how to check for the eventlistener. Many of the threads already available are React environments which seem to have some sort of built in applications that helps them, but not me.

So it's basically this, really narrowed down:

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

It checks for user input and in the changeContent method it just checks for length etc. Any takers on how I should do this?

Edit: Slight workaround that "skips" my issue, but it would be nice to learn how to solve it in a test anyway. With this the test passes (because it ignores it).

Workaround, since the test points eventListener to null:

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

Answer 1

You can use a spy to test if addEventListener is getting called. There is no specific reason to test the implementation of addEventListener .

Also you have to fake the document.querySelector and force it to return an HTMLElement.

Long story short:

Use spy for addEventListener : https://sinonjs.org/releases/v7.3.2/spies/

Use fakes for document.querySelector : https://sinonjs.org/releases/v7.3.2/

Example of spy for 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');
    });
});
...