React + 酶单元测试，无法访问 window.addEventListener

Question

我设置了一些单元测试，使用带有 jsdom 配置的酶的浅层方法进行测试。在我将运行放入我正在使用 window.addEventListener 的组件之前，这一直运行良好。单元测试现在返回

的错误

TypeError: window.addEventListener is not a function

我已经为 JSdom 设置了我的测试助手

import jsdom from 'jsdom';

...

global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = {userAgent: 'node.js'};

这工作正常，然后我升级到酶 3.x，现在我收到这个错误。

我想知道我现在是否需要手动模拟 addEventListener，或者我在访问它时做错了什么。

Answer 1

我像你一样模拟我的 document，然后如果我需要在测试中使用 addEventListener()，我只是在 beforeEach

中模拟它

  beforeEach(() => {
    document = {
      ...document,
      addEventListener: () => { },
      removeEventListener: () => { }
    }
  })

Answer 2

我在尝试检查是否在 componentDidMount 中调用了 addEventListener 时遇到了同样的问题，这似乎对我有用（开玩笑，酵素）

//component
componentDidMount(){
    document.addEventListener("keydown", this.handleKeydownOnSearch, false);
}

.....

//in test file ...
it("on component mount we set the keydown listener", () => {
        global.document.addEventListener = jest.fn();
        wrapper = shallow(<ItemSearch />);
        expect(global.document.addEventListener).toHaveBeenCalled();
    });
...

Answer 3

//in test file ...

    it("should render KeyStrokeHandler", () => {
    // Set-up event listener mock
    const map = {};
    window.addEventListener = jest.fn((event, callback) => {
      map[event] = callback;
    });

    // Mount component that has set callback for keydown event
    const wrapper = mount(<KeyStrokeHandler />);

    // Trigger keydown event
    map.keydown({ key: 'Enter' });
  });

...

React + 酶单元测试，无法访问 window.addEventListener

React + enzyme unit tests, can't access window.addEventListener

javascript

reactjs

unit-testing

enzyme

jsdom