Как изменить состояние реакции при тестировании

Question

У меня есть код ниже,

export default class CampaignTrustSticky extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showTrustBlock: false
    };
  }
  render () {
    let { showTrustBlock } = this.state;
    return(
      <section
        className={classNames('trust-sticky', {
          'pull-up': showTrustBlock
        })}
      >
      </section>
    )
  }
}

в моем тестовом примере, который я использовал, как это,

it('Render Campaing TrustKey', () => {
    let wrapper = shallow(<CampaignTrustSticky />);
    expect(wrapper.find('sectaion.pull-up')).not.toBe(null)
});

в этом тесте он потерпел неудачу из-за значения состояния по умолчаниюустанавливается как ложное.Так, как я могу изменить значение состояния как истинное из тестового примера, чтобы преуспеть в этом случае?

Answer 1

Ответ Джонатана правильный.Хотя ваш компонент написан неправильно.Как может измениться состояние в этом компоненте?Он всегда будет ложным, если он написан так.

Компонент выглядит как нечто, что должно получить "showTrustBlock" в качестве реквизита от родительского компонента.

Итак, лучше всего было бы передать «showTrustBlock» как реквизит от родительского компонента, а затем вы можете легко протестировать его, просто пропустив разные реквизиты.

Кроме того, если высделав это, вы можете переписать компонент как функциональный компонент без сохранения состояния.

Answer 2

it('Render Campaing TrustKey', () => {
    let wrapper = shallow(<CampaignTrustSticky />);
    wrapper.setState({ showTrustBlock: true });
    expect(wrapper.find('sectaion.pull-up')).not.toBe(null)
});

Но ваш тестовый код должен проверить, работает ли ваш компонент.Вы изменяете состояние в тесте, но компонент не меняет его состояние.

Вы должны реализовать функциональность, которая изменяет состояние в вашем компоненте, и протестировать это.Например, нажатие кнопки или что-то в этом роде.