Calling a function from a parent class to test the child class

Question

I'm a writing a test with Jest and Enzyme to test the functionality of a component in a React Native application.

There is a parent component and a child component that used a method in the parent to instantiate.

To elaborate, here is a abridged version of the parent class:

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, so that's the parent.

I'm testing the parent component <LeagueTeamAbout/>

That component has a details property that is set by the teamDetails() method. teamDetails() returns a details object that includes a messaging attribute that is set by the renderMessagingButton() method.

I'm trying to write a test that expects the messagingButton to execute the viewTeamMessageFeed() method upon being tapped by the user.

How do I write this test? I need to somehow call renderMessagingButton() to mock the LeagueTeamAbout details object.

How do I call the parent component's renderMessagingButton() function from the LeagueTeamAbout-test.js file?

score 0 · Answer 1 · answered Mar 23 '17 at 00:41

I'm not sure the test you are describing makes sense to write. The issue is that from LeagueTeamAbout's perspective, it doesn't know anything about StyleButton. StyleButton is passed in as part of a prop to LeagueTeamAbout, but it presumably could be passed any number of other things.

In general, you don't take into account all the places a component may be used when writing a unit test for it; it's just about testing the component's functionality in isolation. You wouldn't want to have to update a component's test every time you use it somewhere else, unless you actually changed that component's functionality in some way.

You would test the interaction between the LeagueTeamAbout component and the StyleButton component in TeamDetail-test.js, since that's where these two components appear together. I would write a test there that basically asserts the LeagueTeamAbout component is passed the correct details prop (including the StyleButton's) given different sets of props (canMessage set to true and false, for instance)

Calling a function from a parent class to test the child class

1 Answers1