web-dev-qa-db-ja.com

React +酵素ユニットテスト、window.addEventListenerにアクセスできません

いくつかの単体テストを設定し、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を手動でモックする必要があるのでしょうか、それともこれにアクセスするために何か間違っていることがありますか。

javascriptreactjsunit-testingenzymejsdom
4
ajmajmajma

documentをあなたと同じようにモックし、テストでaddEventListener()を使用する必要がある場合は、beforeEachでモックします。

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

AddEventListenerがcomponentDidMountで呼び出されているかどうかを確認しようとしたときに同じ問題が発生しました。これは、私にとっては機能しているようです（jest、酵素）

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

...
4
Parth Navadiya