DOM없이 이미지 'naturalHeight'검사하기

Question

JS 테스트를 작성하여 이미지의 CSS 클래스가 제대로 적용되고 있는지 확인하고 있습니다. 클래스는 이미지의 naturalHeight 속성을 기반으로 계산됩니다. 그러나 JS 테스트이므로 DOM이 없으므로 naturalHeight은 테스트시 항상 0입니다. 어떻게하면 Jest와 Enzyme을 사용하여 적절하게 시험하거나 모의 할 수 있습니까?

구성 요소의

간체 버전 : 테스트를 시도

class Image extends React.Component { 
    public render() { 
    return (
     <img 
     src={this.props.src} 
     ref={el => this.imageElement = el } 
     className={ this._computeStyle() }/> 
    ) 
    } 

    private _computeStyle() { 
    if (this.imageElement.naturalHeight > 100){ 
     return 'big'; 
    } 
    return 'small' 
    } 
} 

: jsdom 이후

it('has class "big" if > 100 pixels',() => { 
    let wrapper = mount(<Image src={largeImage} />); 
    expect(wrapper.find('img').hasClass('big')).toBe(true); 
}); 

Answer 1

실제로 문서를 렌더링하지 않습니다는 크기 속성은 일반적으로 구현 고정 0

을 반환하지 않습니다

naturalHeight의 경우 seems은 실제로 height 속성 수동 height를 할당

1 :

은 그래서 저는 두 가지 옵션을 볼 수

wrapper.find('img').node.height = 120; 

2. HTMLImageElement의 프로토 타입을 확장 :

Object.defineProperty(HTMLImageElement.prototype, 'naturalHeight', { get:() => 120 });