成分状態への変化のテストと酵素を使ったインスタンスメソッドのスパイク

Question

私はReactで画像をスムーズに読み込むためにラッパーコンポーネントを使っています。私はモカ、チャイ、シロンの酵素を使って私の成分を単体テストする。ここでのテストでは、私がいることをテストしようとしています：イメージがコンポーネント上onLoadインスタンスメソッドが呼び出された

をロードしたとき

1. コンポーネントの状態が更新される

 
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イベントリスナーが呼び出されると予想し、imgがloadイベントと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です。