Search code examples
reactjsunit-testingjestjshidden-field

Test for presence/absence of hidden field with jest


<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?


Solution

  • 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