reactjs – 仅在条件为真时测试显示按钮

发布时间：2020-12-15 05:04:42 所属栏目：百科来源：网络整理

导读：我有一个渲染函数,如下所示： private render(): JSX.Element { return ( div {this.props.x this.state.y DefaultButton onClick = { this.onDeleteButtonClick } Delete /DefaultButton } /div );} 只有当2条件this.props.x和this.state.y为真时,才显示按

我有一个渲染函数,如下所示：

private render(): JSX.Element {
  return ( 
    <div>
      {this.props.x && this.state.y &&
        <DefaultButton onClick = { this.onDeleteButtonClick } >
          Delete
        </DefaultButton>
      }
    </div>
  );
}

只有当2条件this.props.x和this.state.y为真时,才显示按钮.

同样的,

class TitleContainer extends React.Component {
  private isPageEnabled: boolean = false;
  private isSubmitter: boolean = false;
  render() {
    return (
      <div>
        {this.isPageEnabled && this.isSubmitter &&
          <div>
            <br />
            <SubmitAppFormContainer />
          </div>
        }    
      </div>
    );
   }
 }

只有当2条件为this.isPageEnabled&& this.isSubmitter为true,然后显示SubmitAppFormContainer.

我该怎么写一个测试？请告诉我.谢谢！

我假设您知道如何编写测试.这里棘手的部分是编写易于测试的类.在你的第一种情况下,它可能很简单：

it('shows DefaultButton',() => {
    const shallowRenderer = new ShallowRenderer();
    shallowRenderer.render(<Component
        x={true}
    />);
    const result = shallowRenderer.getRenderOutput();
    expect(result).toMatchSnapshot();
});

创建2个测试,一次传递x = true,另一个传递x = false,所以你测试两种情况.你只需要以某种方式将y状态设置为true.

在你的第二种情况下,TitleContainer似乎更复杂.如何修改isPageEnabled和isSubmitter的值？如果从外面无法进行,则无法正确测试.尽可能使用道具.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!