findByRole() finds no candidates #1283
Description
Sometimes, getByRole() just doesn't seem to find anything, when there must be dozens of things to select from. Is there a timeout or something that might cause it to fail on larger amounts of content? If so, is there a way to tweak this so it actually works?
Example output after using screen.findByRole("") on one of my examples:
Unable to find role="" Ignored nodes: comments, script, style <body style="" > <div> <div class="MuiScopedCssBaseline-root css-1uodbwk-MuiScopedCssBaseline-root" > <div> <div class="layout css-1n2f7rh-RaLayout-root" > <button aria-label="Skip to content" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge skip-nav-button css-164tlhb-MuiButtonBase-root-MuiIconButton-root-RaSkipNavigationButton-root" data-mui-internal-clone-element="true" tabindex="0" type="button" variant="contained" > <span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> </button> <div class="RaLayout-appFrame" > <header class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorSecondary MuiAppBar-positionFixed mui-fixed css-uwxfgq-MuiPaper-root-MuiAppBar-root-RaAppBar-root" style="" > <div class="MuiToolbar-root MuiToolbar-regular RaAppBar-toolbar css-r6ewbb-MuiToolbar-root" > <button aria-label="Open menu" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium RaAppBar-menuButton css-1vx84ty-MuiButtonBase-root-MuiIconButton-root-RaSidebarToggleButton-root" data-mui-internal-clone-element="true" tabindex="0" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root RaSidebarToggleButton-menuButtonIconClosed MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" data-testid="MenuIcon" focusable="false" viewBox="0 0 24 24" > <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /> </svg> <span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> </button> <h6 class="MuiTypography-root MuiTypography-h6 css-vuqtfo-MuiTypography-root" id="react-admin-title" > <span class=" css-wr3s1y-RaConfigurable-root" > <span> <span> Onetomany children </span> </span> </span> </h6> <button aria-label="Configure this page" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root" data-mui-internal-clone-element="true" tabindex="0" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1vooibu-MuiSvgIcon-root" data-testid="SettingsIcon" focusable="false" viewBox="0 0 24 24" > <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" /> </svg> <span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> </button> <div class="css-1l0huk-RaLoadingIndicator-root" > <button aria-label="Refresh" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium RaLoadingIndicator-loadedIcon css-zylse7-MuiButtonBase-root-MuiIconButton-root" data-mui-internal-clone-element="true" tabindex="0" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" data-testid="RefreshIcon" focusable="false" viewBox="0 0 24 24" > <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.6... 18 | userEvent.click(await screen.findByText("Onetomany children")); 19 | > 20 | await screen.findByRole("", {"hidden": true, "suggest": true, "queryFallbacks": true}); | ^ 21 | await waitFor(() => screen.getByRole("title", {"name": "Onetomany children"})); 22 | const table = await screen.findByRole("table"); 23 | const headers = within(table).getAllByRole("columnheader"); at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:162:27) at findByRole (node_modules/@testing-library/dom/dist/query-helpers.js:86:33) at call (tests/relationships.test.js:20:18) at tryCatch (tests/relationships.test.js:2:1) at Generator._invoke (tests/relationships.test.js:2:1) at Generator.next (tests/relationships.test.js:2:1) at asyncGeneratorStep (tests/relationships.test.js:2:1) at _next (tests/relationships.test.js:2:1) You can see there are several candidates just within the top of the output that is logged, and yet it fails to find anything at all.
I've also seen cases where I can't find something with screen.getByRole(...), but then am able to find it when searching a subcomponent with within(...).getByRole(...) with the same arguments (where the within component has been selected from screen), which further makes me think there is a problem with large documents.