Question

我具有如下所示的渲染功能：

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为真时，才显示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状态设置为true。

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

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

1 个答案: