親クラスから子クラスをテストするために関数を呼び出す

Question

私はReact Nativeアプリケーションでコンポーネントの機能をテストするためにJestとEnzymeのテストを書いています。

インスタンス化するために親のメソッドを使用した親コンポーネントと子コンポーネントがあります。それは親ですので、

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の詳細オブジェクトを模擬する必要があります。

親コンポーネントのrenderMessagingButton()関数をLeagueTeamAbout-test.jsファイルから呼び出すにはどうすればよいですか？

Answer 1

あなたが記述しているテストが書くのが分かりません。問題は、LeagueTeamAboutの観点から、StyleButtonについては何も知らないということです。 StyleButtonはLeagueTeamAboutの小道具の一部として渡されますが、おそらく他の多くのものを渡すことができます。

一般に、単体テストの作成時にコンポーネントが使用される可能性があるすべての場所を考慮しません。コンポーネントの機能を単独でテストすることです。コンポーネントの機能を何らかの方法で実際に変更していない限り、コンポーネントを使用するたびにコンポーネントのテストを更新する必要はありません。

TeamDetail-test.jsのLeagueTeamAboutコンポーネントとStyleButtonコンポーネントの相互作用をテストするのは、これらの2つのコンポーネントが一緒に表示されるためです。私は、基本的には、LeagueTeamAboutコンポーネントが、さまざまな小道具（canMessageが真と偽に設定されている）を与えられた正しい小道具（StyleButtonを含む）を渡していると主張するテストを書いています。