Тест на отображение кнопки только при выполнении условий

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?Если это невозможно снаружи, его нельзя проверить должным образом.Если возможно, используйте реквизит.