Bileşenleri yanıtlama ve örnek üzerinde casusluk yapma yöntemlerini değiştirme

Question

Örneklerini kullanma React uygulamasında görüntüleri düzgün bir şekilde yüklemek için bir sarıcı bileşen üzerinde çalışıyorum. Bileşeni test etmek için mocha, chai ve sinon ile enzim kullanıyorum. Burada testte, bunu test etmek için çalışıyorum: Resmin bileşen üzerinde onLoad örnek yöntemi çağrıldı

yüklendiğinde

1. bileşenin durumu güncellenir

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

Durumun güncelleştirmesinin enzim tarafından yansıtılmadığını veya onLoad casusunun çağrı sayısının güncellenmediğini buldum.

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

    }} 

daha iyi içerik için tam kod bakmak için::

• source here

• test here

Answer 1

Bu test için gelen kodu

One, sinon belgesine güvenmeden bunu test edebilir. onLoad ve onFire olay dinleyicilerinin çağrıldığını bekleyerek, img'un load ve error olaylarını tetikleyip tetiklemediğini sınayın.

yerine

, simulate img 'in etkinlik enzyme kullanılarak ve uygun durum geçiş meydana kontrol:

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

Bu aynı zamanda mount bileşen ihtiyacını ortadan kaldırır. Güncellenen testler here bulunabilir.