So i have a very simple class which does the following:

• Adds an event handler on an element on it's creation
• The event handler is an instance method of the class
• I need a cleanup method to remove the handler on demand

export default class TestClass {
  constructor() {
    this.element = document.getElementById("test");
    this.element.addEventListener("click", this.clickHandler);
  }

  clickHandler(e) {
    console.log("Click handler called");
  }

  cleanup() {
    this.element.removeEventListener("click", this.clickHandler);
  }
}

And i have a test where i stub the handler (i need to change it's behavior) and make some checks.

describe("Test", function () {
  beforeEach(function () {
    this.instance = new TestClass();
    this.clickHandlerStub = sinon.stub(this.instance, "clickHandler");
  });

  afterEach(function () {
    this.instance.cleanup();
    delete this.instance;
  });

  it("test case", function () {
    document.getElementById("test").click();
    expect(this.clickHandlerStub.calledOnce).to.equal(true);
  });
});

The expected behavior is to stub (override) the handler (so no logging should appear) and my expectation should pass since it should be called once when the element is clicked. However it seems that it keeps logging and the expectation fails.

If i change the way i bind the event handler and use an arrow function everything works fine.

this.element.addEventListener("click", () => this.clickHandler());

But then i can't remove the event handler in my cleanup method since addEventListener and removeEventListener need to pass the same handler reference in order to work properly.

I created a reproducable example in codesandbox in case it's helpful.

So what am i missing here?