Question

我试图测试是否正在为组件内的图像调用函数回调。

这是组件：

const ImageById = (props) => {
  return (
    <div>
      <img src={props.url} onLoad={props.onLoad} onError={props.onError} />
    </div>
  );
};

我的测试安装了组件，然后监视回调函数：

describe('ImageById', () => {
  it('should call load or error', () => {
    let callbackSpy = sinon.spy();
    let comp = mount(ImageById, {url: 'some-url', onLoad: callbackSpy, onError: callbackSpy});
    expect(callbackSpy.called).to.equal(true);
  });
});

测试失败，因为内部Img标记从不调用其onload或onerror方法。在生产中，代码工作正常，可能与测试环境有关。与Img标记类似，不会对正在设置的url做出反应。

Answer 1

我发现安装组件不会导致load和error事件发生。我发现了一种使用TestUtils模拟它们的方法：

var Wrapper = React.createClass({
  render: function () {
    return (
      <div>{this.props.children}</div>
    );
  },
  propTypes: {
    children: PropTypes.object
  }
});

describe('ImageById', () => {
  it('should call load or error', () => {
    let callbackSpy = sinon.spy();
    // need to wrap `Images` inside a class component because `renderIntoDocument`
    // wont render pure functional components.
    // https://github.com/facebook/react/issues/4692#issuecomment-163029873
    var component = TestUtils.renderIntoDocument(<Wrapper><ImageById url={'some-url'} onLoad={callbackSpy} onError={callbackSpy} /></Wrapper>);
    var image = TestUtils.findRenderedDOMComponentWithTag(component, 'img');
    TestUtils.Simulate.load(image);
    expect(callbackSpy.called).to.equal(true);
  });
});

使用酶，sinon测试反应组分内的负载

1 个答案: