Skip to content

findByRole doesn't find the role #1248

Open
@Nexucis

Description

@Nexucis
  • @testing-library/react version: 14.1.0
  • Testing Framework and version:
    • Jest: 29.5.0
  • DOM Environment:

Relevant code or config:

https://github.com/perses/perses/blob/nexucis/update-dev-deps/ui/plugin-system/src/components/PluginKindSelect/PluginKindSelect.test.tsx#L54-L55

What you did:

I just upgraded the testing-library from the version 13 to 14 and somehow the function findByRole doesn't find my component but in the error console it shows it.

I tried to increase the timeout, I also tried a regexp for the name. It doesn't work.
I have also taken a look at #835 but I'm not using a fancy role here. So I guess my issue is somewhere else.

As a side note, the role attributed previously was button and now it is combobox. I don't know if it's really important to notice it.

What happened:

Here the result shown in the console once the test is crashing.

Unable to find role="combobox" and name "Ernie Variable 1"

Ignored nodes: comments, script, style
<body
  style=""
>
  <div>
    <div
      class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
      data-testid="plugin-kind-select"
    >
      <div
        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"
      >
        <div
          aria-controls=":r3:"
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby=":r2:"
          class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
          id=":r2:"
          role="combobox"
          tabindex="0"
        >
          Ernie Variable 1
        </div>
        <input
          aria-hidden="true"
          aria-invalid="false"
          class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
          tabindex="-1"
          value="ErnieVariable1"
        />
        <svg
          aria-hidden="true"
          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
          data-testid="ArrowDropDownIcon"
          focusable="false"
          viewBox="0 0 24 24"
        >
          <path
            d="M7 10l5 5 5-5z"
          />
        </svg>
        <fieldset
          aria-hidden="true"
          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
        >
          <legend
            class="css-ihdtdm"
          >
            <span
              class="notranslate"
            ></span>
          </legend>
        </fieldset>
      </div>
    </div>
  </div>
</body>

But we clearly see that the component with the role combobox and the name Ernie Variable 1 is there. I know the component is loaded asynchronously, so this combobox with the accurate name is not present immediately but even after increasing the timeout it is still crashing.

So I'm not sure what is wrong in my component or even in my usage of the testing-library.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions