javascript - 使用 enzyme 、sinon 测试图像加载到 react 组件内

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 使用react。

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);
  });
});