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

ajm*_*jma 5 javascript unit-testing jsdom reactjs enzyme

我设置了一些单元测试,使用带有 jsdom 配置的酶的浅层方法进行测试。这一直运行良好,直到我遇到我正在使用的组件window.addEventListener。单元测试现在返回错误

TypeError: window.addEventListener is not a function
Run Code Online (Sandbox Code Playgroud)

我的测试助手像这样为 JSdom 设置

import jsdom from 'jsdom';

...

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

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

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

小智 6

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

...
Run Code Online (Sandbox Code Playgroud)


Max*_*ton 2

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

  beforeEach(() => {
    document = {
      ...document,
      addEventListener: () => { },
      removeEventListener: () => { }
    }
  })
Run Code Online (Sandbox Code Playgroud)