如何在测试中改变反应状态

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)
});

在这个测试中它失败了，因为默认状态值设置为 false。那么我如何才能将测试用例的状态值更改为 true 以成功该用例？

Answer 1

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

但是您的测试代码应该测试您的组件是否工作。您正在更改测试中的状态，但组件不会更改它的状态。

您应该在组件中实现更改状态的功能并对其进行测试。例如按下按钮或类似的东西。

Answer 2

jonathanrz 的回答是正确的。虽然，您的组件并没有真正正确编写。该组件中的状态如何改变？这样写就永远是false

该组件看起来应该从父组件接收 "showTrustBlock" 作为道具。

所以，最好的办法是将 "showTrustBlock" 作为父组件的 prop 传递，然后你可以通过传递不同的 props 轻松测试它。

此外，如果您这样做，您可以将组件重写为无状态功能组件。

如何在测试中改变反应状态

How to change the react state in testing

reactjs

jestjs

testcase