Testbild Onload innerhalb reagieren Komponente mit Enzym, Sinon

Question

Ich versuche zu testen, dass ein Funktionsrückruf für ein Bild in meiner Komponente aufgerufen wird.

Dies ist die Komponente:

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

Und mein Test besteigt die Komponente und dann die Callback-Funktion auszuspionieren:

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

Der Test schlägt fehl, da der innere Img Tag nie seine Berufung ist onload noch onerror Methoden. In der Produktion funktioniert der Code gut, es könnte etwas mit der Testumgebung zu tun haben. Es ist wie Img Tag reagiert nicht auf die wird gesetzt.

Answer 1

Ich entdeckte, dass das Mounten der Komponente keine load und error Ereignisse verursacht. Ich habe einen Weg gefunden, sie unter Verwendung von TestUtils wie folgt zu simulieren:

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