reactjs – 用酶测试Window Scroll事件处理程序的最佳方法是什么？

我一直在与一个新团队合作开发一个React应用程序,并围绕为触发window.scroll事件方法的组件编写单元测试.

所以,我们以此组件为例.

import React,{ Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    window.addEventListener('scroll',this.props.myScrollMethod);
  }

  componentwillUnmount() {
    window.removeEventListener('scroll',this.props.myScrollMethod);
  }

  render() {
    return (
      <div>
        <h1>Hello MyComponent!</h1>
      </div>
    )
  };
};

export default MyComponent;

正如您所看到的,我正在使用一个方法,该方法通过prop传递给组件并将其绑定到窗口事件侦听器,其中事件是滚动的.在现实世界中,当用户向下滚动页面时,此组件将调用myScrollMethod(假设此处的用例是当用户滚动超出页面上的某个点时显示粘性导航栏).

问题是……我需要找到一种合适的测试方法.我的最终目标是创建一个间谍方法,通过myScrollMethod prop传递给组件,然后触发滚动(或在测试中模拟滚动),最后断言滚动处理程序方法是否已触发.以下是我对此的尝试：

import React from 'react';
import sinon from 'sinon';
import expect,{ createSpy }  from 'expect';
import { shallow } from 'enzyme';

import MyComponent from './MyComponent';

describe('The <MyComponent /> component',() => {
  let onScroll;
  let MyTestComponent;

  beforeEach(() => {
    onScroll = createSpy();
    MyTestComponent = shallow(
      <MyComponent
        myScrollMethod={onScroll}
        />
    );
  });

  it('Should call the onScroll method when a user scrolls',() => {
    expect(onScroll).toNotHaveBeenCalled();
    window.dispatchEvent(new window.UIEvent('scroll',{ detail: 0 }));
    expect(onScroll).toHaveBeenCalled();
  });
});

我遇到的问题是最后的断言是失败的,因为间谍从未被调用过.我已经提到了这个网站上的其他一些帖子,但到目前为止还没有找到合适的解决方案.任何建议都会受到高度赞赏,因为它已经让我的大脑暂时搁置了一段时间！

非常感谢！

解决方法

不幸的是,我认为Enzyme在这方面不会有太大帮助.该库仅处理React的合成事件系统中的事件.因此,使用Enzyme渲染的组件不适用于添加到窗口的事件侦听器. This issues thread on Enzyme’s github提供了更多详细信息,并且有一些建议的解决方法可能对您有所帮助.

例如,你可能想监视window.addEventListener,然后你可以检查mount是否使用参数“scroll”和你的回调来调用它.

关于您的特定代码,滚动侦听器在componentDidMount中设置,但您的组件是浅层渲染的,因此实际上不调用componentDidMount(因此没有侦听器).尝试将此行添加到beforeEach：MyTestComponent.instance().componentDidMount()