परीक्षण परिवर्तन छवियों को सुचारू रूप से लोड करने के लिए एंजाइम

Question

मैं एक आवरण घटक पर काम कर रहा हूँ का उपयोग कर प्रतिक्रिया में उदाहरण के तरीकों पर घटक राज्य और जासूसी प्रतिक्रिया करने के लिए। मैं इकाई के लिए मोचा, चाय और सिनोन साथ एंजाइम का उपयोग अपने घटक का परीक्षण करें। परीक्षण यहाँ में, मैं परीक्षण करने के लिए कि कोशिश कर रहा हूँ:

1. घटक के राज्य जब छवि

   लोड होने के

2. घटक पर onLoad उदाहरण विधि बुलाया गया था अद्यतन किया जाता है

 
const wrapper = shallow(); 

const onLoad = wrapper.find('img').props().onLoad; 
const onLoadSpy = sinon.spy(onLoad); wrapper.update(); 
const status = wrapper.state().status; 
expect(onLoadSpy).to.have.been.called; 
expect(status).to.equal('LOADED'); 

मुझे लगता है कि न तो राज्य के लिए अद्यतन एंजाइम या onLoad जासूस की कॉल गिनती से परिलक्षित होता है अद्यतन किया जाता है।

export default class Image extends Component { 
    constructor(props) { 
    super(props); 
    if (props.src != null && typeof props.src === 'string') { 
     this.state = { 
     status: LOADING, 
     }; 
    } else { 
     this.state = { 
     status: PENDING, 
     }; 
    } 
    this.onLoad = this.onLoad.bind(this); 
    } 

    onLoad() { 
    this.setState({ 
     status: LOADED, 
    }); 
    } 

    render() { 
    //lots of code above the part we care about 
    const defaultImageStyle = style({ 
     opacity: 0, 
     transisition: 'opacity 150ms ease', 
    }); 

    const loadedImageStyle = style({ 
     opacity: 1, 
    }); 

    let imageStyle = defaultImageStyle; 

    if (this.state.status === LOADED) { 
     imageStyle = merge(defaultImageStyle, loadedImageStyle); 
    } else { 
     imageStyle = defaultImageStyle; 
    } 


    let image; 
    if (alt != null) { 
     image = (<img 
     className={imageStyle} 
     src={src} 
     width={width} 
     height={height} 
     alt={alt} 
     onLoad={this.onLoad} 
     />); 
    } else { 
     image = (<img 
     className={imageStyle} 
     src={src} 
     width={width} 
     height={height} 
     role="presentation" 
     onLoad={this.onLoad} 
     />); 
    } 

    let statusIndicator = null; 
    if (this.state.status === LOADING) { 
     statusIndicator = (<div className={loadingStyle}></div>); 
    } 

    return (<div className={wrapperStyle}> 
     {statusIndicator} 
     {image} 
    </div>); 

    }} 

बेहतर संदर्भ के लिए पूर्ण कोड पर एक नज़र लेने के लिए::

• source here

• test here

Answer 1

इस परीक्षा के लिए इसी कोड है

एक sinon पर निर्भर बिना इस परीक्षण कर सकते हैं। onLoad और onFire ईवेंट श्रोताओं को बुलाया जाता है, यह जांच करके, परीक्षण जांचें कि imgload और error ईवेंट को सक्रिय करता है या नहीं।

इसके बजाय, simulateimg की घटनाओं enzyme का उपयोग कर और जाँच लें कि उपयुक्त राज्य संक्रमण होता है:

it('has a state of LOADED if a good src prop is supplied',() => { 
    const wrapper = shallow(<Image 
    src="anyString.jpg" 
    width={300} 
    height={300} 
    />); 

    const img = wrapper.find('img'); 
    img.simulate('load'); 
    const status = wrapper.state().status; 
    expect(status).to.equal('LOADED'); 
}); 

यह भी mount घटक करने की आवश्यकता समाप्त। अद्यतन परीक्षण here पाया जा सकता है।