reactjs - 如何使用 jest 在 React 中测试使用 mousetrap 创建的事件

Question

我正在react中编写一个使用mousetrap的应用程序。我想知道如何 Jest 测试 mousetrap 的事件。我想查看当我单击向左箭头时是否正在调用组件函数。我无法在测试中模拟此事件。看起来 React 合成事件之外的事件没有对组件进行任何更改。我认为 Mousetrap 将事件附加到窗口。我需要知道如何测试此功能。

it("checks on leftclick", () => {

    var spy = jest.spyOn(MyComponent.prototype, "onLeftClick");
    var wrapper = mount(<MyComponent />);
    var event = simulant( 'keyDown', { key: 37, which: 37 });
    simulant.fire(window, event); // It did not work
    ReactTestUtils.simulate.keyDown(window, { key: "ArrowLeft", keyCode: 37, which: 37 }) //Did not work either
    expect(spy).toHaveBeenCalled();
    spy.mockReset();
    spy.mockRestore();

  });

Answer 1

尝试使用 document.documentElement 而不是 window 以及以下模拟火灾语法:

it("checks on leftclick", () => {

    var spy = jest.spyOn(MyComponent.prototype, "onLeftClick");
    var wrapper = mount(<MyComponent />);
    simulant.fire(document.documentElement, "keydown", { keyCode: 37 });
    expect(spy).toHaveBeenCalled();
    spy.mockReset();
    spy.mockRestore();

  });