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

Question

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

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为真时,才显示SubmitAppFormContainer.

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

Answer 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修改？如果无法从外部进行测试，则无法进行正确的测试。如果可能的话使用道具。