addEventHandler mocking in Jest & Typescript

Question

这是一个普通的 TS 项目。 没有框架。

我在这里阅读了这篇文章，作者模拟了addEventListener方法（但是在 window 上）。

我很困惑为什么嘲笑的 function 没有注册为被调用。

 console.log
    called in here

      at Object.handleClick [as click] (src/painter/painter.ts:24:13)

 FAIL  src/painter/painter.test.ts
  Painter Setup
    ✕ Should add event handlers to canvas (14 ms)

  ● Painter Setup › Should add event handlers to canvas

    expect(received).toHaveBeenCalled()

    Matcher error: received value must be a mock or spy function

简化实现：

class Painter {
  constructor(target: HTMLCanvasElement) {
    this.canvas = target;
    //...
    this.init();
  }
  init() {
    this.canvas.addEventListener("click", this.handleClick);
  }
  // I know that the this context is wrong here, but trying to simplify the issue
  handleClick(event: MouseEvent) {
    console.log('called in here');
  };
}


// testing
const eventListeners: Record<string, Function> = {};

let canvas = document.createElement("canvas");

canvas.addEventListener = jest.fn((eventName: string, callBack: Function) => {
  eventListeners[eventName] = callBack;
}) as jest.Mock;


describe("Painter Setup", function () {
  it("Should add event handlers to canvas", () => {
    const painter = new Painter(canvas);
    eventListeners.click({
      clientX: 0,
      clientY: 0,
    });
    expect(painter.handleClick).toHaveBeenCalled();
  });
});

Answer 1

我认为缺少的步骤只是在 handleClick 方法上使用间谍，以注册确实调用了 function。 handleClick 仍然是通过调用的，而不是 mocking 它。

// testing
const eventListeners: Record<string, Function> = {};

let canvas = document.createElement("canvas");

canvas.addEventListener = jest.fn((eventName: string, callBack: Function) => {
  eventListeners[eventName] = callBack;
}) as jest.Mock;

describe("Painter Setup", function () {
  it("Should add event handlers to canvas", () => {
    const spied = jest.spyOn(Painter.prototype, 'handleClick');
    
    const painter = new Painter(canvas);
    
    // this will still call though the original method. Therefore I will see  "called in here" from painter.handleClick
    eventListeners.click({
      clientX: 0,
      clientY: 0,
    });
   
    expect(spied).toHaveBeenCalled(); 
  });
});

Answer 2

该错误表明toHaveBeenCalled()收到的参数（即， painter.handleClick ）应该是一个模拟/间谍，但它不是。

您可以在测试中将handleClick设置为模拟 function ：

it('...', () => {
  Painter.prototype.handleClick = jest.fn(); // mock handleClick
  const painter = new Painter(canvas);

  //...
  expect(painter.handleClick).toHaveBeenCalled();
})