expect().toBeEnabled() fails by `disabled="false"`

[JakubGIT]

• @testing-library/jest-dom version: 5.16.5
• node version: 16.16.0
• npm (or yarn) version: 9.1.2
• @testing-library/react: 13.4.0
• @testing-library/user-event: 14.4.3
• react: 18.2.0

Relevant code or config:

productive code

import { DuetButton } from '@duetds/react';
// ...
<DuetButton onClick={props.someCallback} disabled={someState}>
        some name
</DuetButton>

test code

const button= screen.getByRole('button', { name: /some name/i });
expect(button).toBeDisabled(); // works ok
// change the state
expect(button).toBeEnabled(); // fails although the button is enabled

What you did:

• there is a test working well with a HTML button or with React Bootstrap button
• when the button is replaced with a button from the [duet] library, which is using web-components implemented with stencil, there is a problem with the toBeEnabled() matcher
• the property disabled with the value "false" is evaluated like if it was disabled
• the testing of the same code with Playwright works just fine and the the button is recognized as enabled

What happened:

Error: expect(element).toBeEnabled()

Received element is not enabled:
  <duet-button class="sc-duet-button-h hydrated" disabled="false" />

Reproduction:

• unfortunately the codesendbox doesn't work for me

in a react project

1. npm i @duetds/react
2. add a
3. test the button's disabled status

• getByRole didn't always work, but getByText works

Problem description:

• an enabled button is treated like a disabled one in tests

Suggested solution:

• only when the property disabled is true, toBeEnabled() returns false

[pseudogram]

I was going to give this a +1 then I read the docs for the HTML attribute 'disabled'.

A note for those to come:

If you are writing semantic HTML you should not add the attribute disabled if a button is enabled. And there is no such thing as disabled="false" because the attribute has no value.

Reading the double negative probably makes you think, "Something's up?" 🤔

In JSX you should be passing a boolean value to the disabled attribute (not a string). React will handle it the boolean and render the attribute accordingly.