2017-09-08 4 views
0

여러 렌더링 메서드가있는 구성 요소가 있습니다. 어떻게 모두 테스트 할 수 있습니까? 반응과 함께 효소와 농담을 사용하십시오.동일한 구성 요소 내에서 효소 테스트 여러 렌더링 메서드

일부 의사 코드는 내 구성 요소 구조의 예로 구성 요소가 조용합니다.

class MyComponent extends Component{ 
 

 
    render1(){ 
 
    return(
 
     <div>render1</div> 
 
    ) 
 
    } 
 
    
 
    render2(){ 
 
    return(
 
     <div>render2</div> 
 
    ) 
 
    } 
 
    
 
    render(){ 
 
    return(
 
     <div>default</div> 
 
    ) 
 
    } 
 
} 
 

 
export default MyComponent;

내 테스트는이 render1() 또는 render2() 적용되지 않습니다 render()을 포함한다. 효소가 기본 render() 방법을 보일 것 같습니까?

describe('MyComponent',() => { 
 
    beforeEach(() => { 
 
     wrapper = shallow(<MyComponent />); 
 
    }); 
 
    
 
    it('MyComponent renders without crashing',() => { 
 
     expect(wrapper.length).toBeTruthy(); 
 
    }); 
 
};

어떻게 내 범위에서 render1()render2()을 포함 할 수있다?

답변

1

ReactDOM.render 또는 enzyme.shallow으로 부품을 장착 할 때 호출되는 방법은 render()입니다. 다른 렌더링 방법은 어떤 방식으로 작동합니까?

describe('MyComponent',() => { 
    it('MyComponent should render with render1 method',() => { 
     wrapper = shallow(<MyComponent shouldRender1={true} />); 
     expect(wrapper.length).toBeTruthy(); 
    }); 

    it('MyComponent should render with render2 method',() => { 
     wrapper = shallow(<MyComponent shouldRender2={true} />); 
     expect(wrapper.length).toBeTruthy(); 
    }); 

    it('MyComponent should render with default render method',() => { 
     wrapper = shallow(<MyComponent />); 
     expect(wrapper.length).toBeTruthy(); 
    });  
}; 
:

class MyComponent extends Component{ 

    render1(){ 
    return(
     <div>render1</div> 
    ) 
    } 

    render2(){ 
    return(
     <div>render2</div> 
    ) 
    } 

    render(){ 
    const {shouldRender1, shouldRender2} = this.props; 

    if (shouldRender1) { 
     return this.render1(); 
    } 

    if (shouldRender2) { 
     return this.render2(); 
    }  

    return(
     <div>default</div> 
    ) 
    } 
} 

export default MyComponent; 

를 그런 다음 테스트는 다음과 같이 할 수 있습니다 :

아마 당신은 몇 가지 소품이나 상태에 따라 render() 방법에서 호출 할 방법 결정, 같은 것을 할 수