.toHaveAttribute('disabled') and .toBeDisabled()

[StefanZivkovic]

I am using Button from @material-ui/core, and my test have different output depending of which assert method I use. Initially button is disabled when page loads, and in snapshot there is confirmation about it.

<button
              className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-sizeLarge Mui-disabled Mui-disabled"
              disabled={true}
              onBlur={[Function]}
              ...
              tabIndex={-1}
              type="button"
            >
              <span
                className="MuiButton-label"
              >
                w4pay.termsOfElectronicPay.buttonText

Scenarios:
expect(readyToEsignButton).not.toBeDisabled(); - FAILS (expected)
expect(readyToEsignButton).toBeDisabled(); - PASSES (expected)
expect(readyToEsignButton).toHaveAttribute('disabled'); - PASSES (not sure what to expect here since value is not provided as second attribute)
expect(readyToEsignButton).toHaveAttribute('disabled', 'true'); - FAILS

Expected the element to have attribute:
      disabled="true"
    Received:
      disabled=""

Mostly i am confused with last output, because disable="" even though it is disabled (i would expect to have value of true).

Any thoughts?

[gnapse]

Bear in mind that jest-dom works with the regular HTML output of your components, and not with how this is represented in React. There are differences between JSX and HTML. One of these is that boolean attributes in HTML only rely on the attribute's presence to determine if the attribute is true.

So, for instance, this JSX:

<button disabled={true}>do not click me</button>
<button disabled={false}>click me</button>

will result in this DOM structure:

<button disabled="">do not click me</button>
<button>click me</button>

[StefanZivkovic]

Thanks for pointing out on that and for sharing an example.

[eps1lon]

You want to check for the property not the attribute. The property is probably what you're actually interested in unless you need [disabled="true"] CSS selectors which could be replaced with :disabled:

-expect(readyToEsignButton).toHaveAttribute('disabled', 'true'); 
+expect(readyToEsignButton).toHaveProperty('disabled', true); 

[StefanZivkovic]

Correct. I need property! Thanks!

[shubhvj]

readyToEsignButton

hey, what is this 'readyToEsignButton' ? I can't seem to wrap my head around it.

[jesse-gc]

@shubhvj its the button theyre testing for

[ChukwuEmekaAjah]

Thank you for the response @eps1lon . It has saved my day.