仅在条件为真时测试显示按钮答案

【问题标题】：Test for displaying button only when conditions are true仅在条件为真时测试显示按钮
【发布时间】：2018-11-03 05:37:07
【问题描述】：

我有一个如下图的渲染函数：

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

只有当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>
    );
   }
 }

只有当this.isPageEnabled && this.isSubmitter这2个条件为真时，才会显示SubmitAppFormContainer。

我如何编写相同的测试？请告诉我。谢谢！

【问题讨论】：

标签： reactjs typescript react-native jestjs enzyme

【解决方案1】：

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

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-state 设置为true。

在您的第二种情况TitleContainer 中，它似乎更复杂。如何修改isPageEnabled 和isSubmitter 的值？如果从外部无法实现，则无法正确测试。尽可能使用道具。

【讨论】：