findByRole() finds no candidates

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.

Description

Contributor guide

First steps

Research direction

Assessment