<div className="errorMsg" hidden={props.error === true ? false : true}>
Error message text
</div>
I have this div that is hidden if props.Error
is false, and displayed if it's true. I am trying to test that the text does/doesn't appear depending on prop value. Since I'm using shallow render, the test expect(wrapper.find('.errorMsg').length).toEqual(1);
is always going to pass whether hidden is true or not. I'm using shallow render because that's necessary for my other tests, and so far I've tried:
expect(wrapper.find('.garmentOriginErrorMsg').length).toEqual(0);
expect(wrapper.find('.errorMsg')).toHaveProperty('props', 'hidden: true')
expect(wrapper.find('.errorMsg').displayed()).toBeFalsy()
expect(wrapper.find('.errorMsg').hasStyle('display', 'none')).toBe(true)
Is this possible with shallow rendering, or is my only option to use mount?
This should work with shallow
:
expect(wrapper.find('.errorMsg').props().hidden).toBe(true);
Also, props.error === true ? false : true
can be written simply as !props.error