javascript - 在React组件内的div上模拟('scroll')返回 `AssertionError: expected false to be true`

我有一个React组件，我正在为此编写一些测试。我想测试一下，当滚动组件中的div时，它会触发监听该事件的函数onScroll。不幸的是， enzyme 的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')

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

谢谢。

编辑

对 enzyme .simulate文档的进一步阅读显示了以下内容:



我想知道是否是因为我没有将onScroll作为 Prop ，所以.simulate目前没有触发handleScroll函数。

最佳答案

我没有使用Sinon从事 spy 事件，但是可能值得重写handleScroll:

handleScroll = (event) => {
  return true;
}

粗箭头会自动为您绑定(bind)“this”，这意味着您可以在构造函数中删除this.handleScroll = ...。
另一种选择是测试handleScroll函数的结果(虽然它只是返回true，这显然很棘手)，而不是测试它的调用。
最后，您可以测试组件渲染器是否已将onScroll属性设置为this.handleScroll来创建div，然后分别测试handleScroll。

关于javascript - 在React组件内的div上模拟('scroll')返回 `AssertionError: expected false to be true`，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39419930/