在 React 组件内的 div 上模拟（'scroll'）返回 `AssertionError: expected false to be true`

Question

我有一个 React 组件，我正在为其编写一些测试。我想测试一下，当div组件中的 a 滚动时，它会触发侦听该事件的函数onScroll. 不幸的是，酶simulate('click')似乎并没有spy像我期望的那样调用我的函数。

我的组件

import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
const $ = jQuery;

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.handleScroll = this.handleScroll.bind(this);
  }

  handleScroll(event) {
    return true;
  }

  render() {
    return(
      <div className="my-component" onScroll={this.handleScroll}>
        <h1>Hello world</h1>
      </div>
    );
  }
}

export default MyComponent;

我的测试

import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
import { spy } from 'sinon';
import jsdom from 'jsdom';;

import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-addons-test-utils';
import MyComponent from '../views/components/my-component';

describe("<MyComponent />", () => {
  it('should trigger pagination when div.search-box scrolls', () => {
    const component = mount(<MyComponent />);
    const handleScrollSpy = spy(component.node, 'handleScroll');
    component
      .find('.my-component')
      .simulate('scroll')

    expect(handleScrollSpy.called).to.be.true;
  });
});

这将返回： AssertionError: expected false to be true

我已经打过电话测试中的功能，它使callCount要1...

component.node.handleScroll();
console.log("Call count: ", handleScrollSpy.callCount);

这让我觉得我的测试问题与simulate零件有关......

component
      .find('.search-box')
      .simulate('click')

有人可以为我确认我是否正确地处理这个问题，或者我确实做错了什么吗？

谢谢。

---

编辑

进一步阅读酶.simulate文档揭示了以下内容：

尽管名称暗示这是模拟实际事件，但 .simulate() 实际上将根据您提供的事件定位组件的 prop。例如， .simulate('click') 实际上会获取 onClick 道具并调用它。

我想知道是不是因为我没有将 传递onScroll为.simulate当前未触发该handleScroll功能的道具。

Answer 1

我不能代表酶，但使用常规的反应测试实用程序模拟，你必须向它传递一个 deltaY，如下所示： TestUtils.Simulate.scroll(wrapper, { deltaY: 500 });

我想看看你是否可以将相同的 deltaY 传递给 .simulate 酶提供的。