• @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