CODEWITHSUNDEEP
reactjsjestjstestcase
Akbar Basha
Akbar Basha

Reputation: 1198

How to change the react state in testing

I have a below code,

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

in my test case i have used like this,

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

in this test it has been failed because of the default state value is set as false. So how can i change the state value as true from test case to succeed that case?

Upvotes: 1

Views: 106

Answers (2)

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

The answer by jonathanrz is correct. Although, your component isn't really written correctly. How can the state in that component change? It will always be false if it's written like that.

The component looks like something that should receive "showTrustBlock" as a prop, from a parent component.

So, the best thing would be to pass the "showTrustBlock" as a prop from a parent component, and then you can easily test it by just passing different props.

Also, if you do it like that, you can rewrite the component as a stateless functional component.

Upvotes: 1

jonathanrz
jonathanrz

Reputation: 4296

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

But your test code should test if your component works. You are changing the state in the test but the component doesn't change it`s state.

You should implement the functionality that change the state in your component and test this. For example a button press or something like that.

Upvotes: 3

Related Questions