Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
When disabling React Transition Group transitions in jest, the aria-hidden="true" keeps showing in the (fake) DOM after opening and closing the dialog. This prevents React Testing Library from selecting elements based on accessibility.
FAIL src/AlertDialog.test.tsx
✕ shows the alert dialog (1233 ms)
● shows the alert dialog
Unable to find role="button"
Ignored nodes: comments, <script />, <style />
<body
style="padding-right: 1024px; overflow: hidden;"
>
<div
aria-hidden="true"
>
<div>
<button
class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Open alert dialog
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</body>
20 |
21 | expect(
> 22 | await screen.findByRole("button", { name: "Open alert dialog" })
| ^
23 | ).toBeInTheDocument();
24 | });
25 |
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:187:27)
at findByRole (node_modules/@testing-library/dom/dist/query-helpers.js:101:33)
at Object.<anonymous> (src/AlertDialog.test.tsx:22:18)
at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/@jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 2.172 s, estimated 3 s
Ran all test suites.
error Command failed with exit code 1.
Expected behavior 🤔
The elements in the document should be reachable and accessible again after closing a dialog.
Steps to reproduce 🕹
Here is a reproduction repository: https://github.com/volcomix/issue-testing-mui-dialog-without-transitions
Something really weird is that I can't manage to reproduce the issue in codesandbox, so I prefer not to share the link to not confuse the investigation. Let me know if you'd like me to share it in comments.
Context 🔦
We are trying to test interactions with a dialog in jest and to disable transitions in order to speed up the tests. The issue doesn't happen when keeping the transitions enabled.
Your environment 🌎
The issue happens only in jest. Everything works fine in browsers.
`npx @mui/envinfo`
System:
OS: macOS 12.2.1
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
Browsers:
Chrome: 98.0.4758.102
Edge: Not Found
Firefox: 97.0
Safari: 15.3
npmPackages:
@emotion/react: latest => 11.8.1
@emotion/styled: latest => 11.8.1
@mui/base: 5.0.0-alpha.69
@mui/material: latest => 5.4.3
@mui/private-theming: 5.4.2
@mui/styled-engine: 5.4.2
@mui/system: 5.4.3
@mui/types: 7.1.2
@mui/utils: 5.4.2
@types/react: latest => 17.0.39
react: latest => 17.0.2
react-dom: latest => 17.0.2
typescript: latest => 4.5.5