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

时间:2017-12-04 16:19:01

标签: javascript reactjs unit-testing enzyme jsdom

我已经设置了一些单元测试,使用酶的浅层方法和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,还是我做错了访问它。

3 个答案:

答案 0 :(得分:4)

我在尝试检查是否已在componentDidMount中调用addEventListener时遇到了同样的问题,这似乎对我有用(jest,enzyme)

//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();
    });
...

答案 1 :(得分:4)

//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' });
  });

...

答案 2 :(得分:1)

我就像你一样嘲笑我的document,然后如果我需要在测试中使用addEventListener(),我只是在beforeEach

中嘲笑它
  beforeEach(() => {
    document = {
      ...document,
      addEventListener: () => { },
      removeEventListener: () => { }
    }
  })