Test de charge d'image à l'intérieur du composant de réaction en utilisant l'enzyme, sinon

Question

J'essaie de tester qu'une fonction de rappel est appelée pour une image dans mon composant.

Ceci est le composant:

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

Et mon test monte sur le composant, puis épier la fonction de rappel:

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

Le test échoue car la balise Img intérieure est jamais appeler son onload ni onerror méthodes. En production, le code fonctionne correctement, cela peut être lié à l'environnement de test. Sa balise Img ne réagit pas au url en cours de définition.

Answer 1

J'ai découvert que le montage du composant ne provoque pas d'événements load et error. J'ai trouvé un moyen de les simuler en utilisant TestUtils comme ceci:

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