Reputation: 1198
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
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
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