Question

我想对有2个孩子的组件进行单元测试。

正在测试的组件负责呈现第一个子组件。然后，当用户完成与第一个孩子的交互时，第一个孩子将通过onComplete回调回调父母。

当回调父组件时，它将使用状态和条件渲染来隐藏第一个子组件并显示第二个子组件。

我希望我的榜样有道理。想象一下用户与组件交互的页面（即点击，输入文本等）。它然后消失，出现另一个组件。

我想将父组件与子组件分开进行单元测试。理想情况下，我想嘲笑孩子们。但我不知道如何让孩子的模拟在我的测试中回调父母。

我目前的测试使用真正的孩子。这意味着当孩子改变时我必须改变父测试。（即我点击了孩子的一些文字，在我的父考试中触发了对父母的回调。如果我想改变孩子的文字，我必须改变我的父组件的测试以点击更改的文本）。（这显然是屁股中的巨大痛苦）

以下是我试图测试的一个例子：

export default class ExampleParentComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      part1Complete: false
    }
  }

  render() {
    let part1, part2;

    if(!this.state.part1Complete) {
      part1 = <Part1 onComplete={this._handlePart1Complete.bind(this)} />
    } else {
      part2 = <Part2 />
    }

    return (
      <div>
        {part1}
        {part2}
      </div>
    );
  }

  _handlePart1Complete() {
    this.setState({ part1Complete: true });
  }
}

另一个例子可能是：

第一个孩子用结果回叫父母。

根据结果的值，父级可以接下来渲染part2或part3。我们如何在mock子上触发回调并使用某个结果进行回调（因此我们可以测试渲染part2或part3的逻辑）。

希望这是有道理的。

期待收到你的回复

React - 如何模拟子组件并让它们回调父组件？

0 个答案: