testing-library / dom-testing-library

šŸ™ Simple and complete DOM testing utilities that encourage good testing practices.
https://testing-library.com/dom
MIT License
3.26k stars 466 forks source link

Cannot access disabled button #1217

Open pschyma opened 1 year ago

pschyma commented 1 year ago

Relevant code or config:

const upload = screen.getByRole('button', { name: /upload/i });

What you did:

Updated from version 8.4.0 to 9.0.0 and rerun test.

What happened:

Error: Test timed out in 5000ms.
If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
    at Timeout.<anonymous> (file:///.../frontend/node_modules/@vitest/runner/dist/index.js:44:16)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/upload/i`

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

I tried the hidden: true option, but there was no change.

Reproduction:

Problem description:

Suggested solution:

MatanBobi commented 1 year ago

Can you please share a minimal reproduction? I tried reproducing this one with the latest RTL version which is using @testing-library/dom@9.0.0 and this issue didn't reproduce.

william-will-angi commented 1 year ago

Posting here because I also ran into these issues after regenerating my app's package-lock.json.

I had installed versions:

@testing-library/react: 12.1.5 @testing-library/user-event: 14.4.3

After regenerating the package-lock.json, two different versions of @testing-library/dom were downloaded:

Screen Shot 2023-03-08 at 6 22 37 PM

With multiple versions of @testing-library/dom, I experienced the same issues mentioned in this issue.

I was able to resolve the issues by doing either of the following:

  1. Manually install @testing-library/dom@^8
  2. Add the following property to my package.json:
  "overrides": {
    "@testing-library/react": {
      "@testing-library/dom": "^9"
    }
  }

I think the best solution would be to patch @testing-library/react v12/13 to allow for @testing-library/dom v8 & v9, but I don't think it's maintained anymore since it's two major releases behind šŸ˜¢ .