2017-03-22 4 views
1

저는 Jest와 Enzyme의 테스트를 작성하여 React Native 응용 프로그램에서 구성 요소의 기능을 테스트했습니다.부모 클래스의 함수를 호출하여 자식 클래스 테스트

인스턴스 생성을 위해 부모에 메서드를 사용하는 부모 구성 요소와 하위 구성 요소가 있습니다. 즉 부모, 그래서

const TeamDetail = React.createClass({ 
    propTypes: { 
    team: PropTypes.object.isRequired, 

    ...[INSERT MANY REQUIRED PROPS HERE] 

    viewTeamMessageFeed: PropTypes.func.isRequired, 
    }, 

    ... INIT LOGIC ... 

    render() { 
    return (
     <TabContainer 
     containerStyle={styles.tabContainer} 
     primaryTab={'board'} 
     tabs={this.tabs()} 
     /> 
    ) 
    }, 
    tabs() { 
    let tabs = [ 
     this.tab('board', this.renderBoard()), 
    ]; 

    return (tabs); 
    }, 
    tab(name: string, panel: Object) { 
    let empty = true; 
    return({name: name, panel: panel, empty: empty}) 
    }, 
    renderBoard() { 
    return(
     <LeagueTeamAbout 
     item={this.props.team} 
     details={this.teamDetails()} 
     /> 
    ) 
    }, 
    ...MORE METHODS...THIS NEXT ONE IS IMPORTANT: 
    renderMessagingButton() { 
    if (this.props.canMessage) { 
     return (
     <StyledButton buttonText='Messaging' onPress={() => this.props.viewTeamMessageFeed(this.props.team)} /> 
    ); 
    } 
    return null; 
    ... 

OK : 정교

, 여기에 부모 클래스의 축약 버전입니다.

나는 부모 구성 요소 구성 요소가 teamDetails() 메소드에 의해 설정되는 세부 속성을 가지고 <LeagueTeamAbout/>

을 테스트하고 있습니다. teamDetails()renderMessagingButton() 메소드로 설정된 메시징 속성을 포함하는 세부 사항 오브젝트를 리턴합니다.

messagingButton이 사용자가 탭하면 viewTeamMessageFeed() 메서드를 실행하기를 기대하는 테스트를 작성하려고합니다.

이 테스트는 어떻게 작성합니까? 어떻게 든 renderMessagingButton()을 호출하여 LeagueTeamAbout 세부 개체를 조롱해야합니다.

LeagueTeamAbout-test.js 파일에서 부모 구성 요소의 renderMessagingButton() 함수를 어떻게 호출합니까?

답변

0

필자가 설명하는 테스트가 의미가 있다고 확신하지 않습니다. 문제는 LeagueTeamAbout의 관점에서 볼 때 StyleButton에 대해 알지 못한다는 것입니다. StyleButton은 LeagueTeamAbout에 소품의 일부로 전달되지만, 다른 많은 것들을 전달할 수 있습니다.

일반적으로 단위 테스트를 작성할 때 구성 요소가 사용될 수있는 모든 위치를 고려하지 않습니다. 그것은 단지 구성 요소의 기능을 독립적으로 테스트하는 것입니다. 구성 요소의 기능을 실제로 변경하지 않는 한, 다른 곳에서 사용할 때마다 구성 요소 테스트를 업데이트하지 않아도됩니다.

TeamDetail-test.js의 LeagueTeamAbout 구성 요소와 StyleButton 구성 요소 간의 상호 작용을 테스트 할 수 있습니다. TeamDetail-test.js의 두 구성 요소가 함께 표시되기 때문입니다. 나는 기본적으로 LeagueTeamAbout 구성 요소가 소품 (canMessage가 true와 false로 설정된 경우)이 주어진 주어진 정확한 세부 소품 (StyleButton 포함)을 전달한다고 주장하는 테스트를 작성합니다.