使用酶，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標籤是永遠不會調用其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); 
    }); 
});