javascript - 使用酶、sinon 测试反应组件内部加载的图像

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标签从不调用它的onloadnoronerror方法。在生产中，代码运行良好，可能与测试环境有关。它的likeImg标签不会对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);
  });
});