从父类调用函数来测试子类答案

【问题标题】：Calling a function from a parent class to test the child class从父类调用函数来测试子类
【发布时间】：2017-03-22 21:25:59
【问题描述】：

我正在使用 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;
  ...

好的，这就是父级。

我正在测试父组件<LeagueTeamAbout/>

该组件有一个由 teamDetails() 方法设置的 details 属性。 teamDetails() 返回一个详细信息对象，其中包含由 renderMessagingButton() 方法设置的消息属性。

我正在尝试编写一个测试，期望 messagingButton 在被用户点击时执行 viewTeamMessageFeed() 方法。

如何编写此测试？我需要以某种方式调用renderMessagingButton() 来模拟LeagueTeamAbout 详细信息对象。

如何从LeagueTeamAbout-test.js文件中调用父组件的renderMessagingButton()函数？

【问题讨论】：

标签： javascript reactjs react-native jestjs enzyme

【解决方案1】：

我不确定您描述的测试是否有意义。问题是，从 LeagueTeamAbout 的角度来看，它对 StyleButton 一无所知。 StyleButton 作为道具的一部分被传递给 LeagueTeamAbout，但它大概可以传递给任何数量的其他东西。

一般来说，在为组件编写单元测试时，您不会考虑到组件可能会用到的所有地方；它只是单独测试组件的功能。您不希望每次在其他地方使用组件时都必须更新它的测试，除非您实际上以某种方式更改了该组件的功能。

您将在 TeamDetail-test.js 中测试 LeagueTeamAbout 组件和 StyleButton 组件之间的交互，因为这是这两个组件一起出现的地方。我会在那里编写一个测试，基本上断言 LeagueTeamAbout 组件在给定不同的道具集（例如，canMessage 设置为 true 和 false）的情况下传递了正确的 details 道具（包括 StyleButton）

【讨论】：