Question

我正在使用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详细信息对象。

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

Answer 1

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

通常，在编写单元测试时，不考虑组件可能使用的所有位置;它只是孤立地测试组件的功能。除非您以某种方式实际更改了该组件的功能，否则您不希望每次在其他地方使用它时都必须更新组件的测试。

您将在TeamDetail-test.js中测试LeagueTeamAbout组件与StyleButton组件之间的交互，因为这是两个组件一起出现的位置。我会在那里写一个测试，基本断言LeagueTeamAbout组件传递正确的详细信息prop（包括StyleButton的）给出不同的道具集（例如canMessage设置为true和false）

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

1 个答案: