Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TabPanel role with a incorrectly name when using getByRole (but works using getByText) #912

Closed
smblee opened this issue Mar 19, 2021 · 1 comment
Closed

TabPanel role with a incorrectly name when using getByRole (but works using getByText) #912

smblee opened this issue Mar 19, 2021 · 1 comment

Comments

@smblee
Copy link

smblee commented Mar 19, 2021

"@testing-library/react": "11.0.2",
"@testing-library/user-event": "^13.0.2",
"@testing-library/jest-dom": "5.11.4"
I am using jest with latest version of CRA.
default Jest environment (JSDom)

Node version 14

Relevant code or config:

Here is the error I get when I try

    render(<Test />);

    const tab1 = screen.getByRole('tab', { name: /Tab 1/ });
    const tab2 = screen.getByRole('tab', { name: /Tab 2/ });
    const panel1 = screen.getByRole('tabpanel', { name: /Panel 1/ });
    const panel2 = screen.getByRole('tabpanel', { name: /Panel 2/ });

    userEvent.click(tab2);
    expect(tab1).not.toHaveFocus();
    expect(panel1).not.toBeVisible();
    expect(tab2).toHaveFocus();
    expect(panel2).toBeVisible();

I have been refactoring to use screen.getByRole with getByText and previous this test was working, but now it doesn't seem to work. Mainly the error I am getting is the following

Unable to find an accessible element with the role "tabpanel" and name /Panel 1/

and here are the rest of the error (notice the tabpanel where it expects Name as "Tab 1" instead of "Panel 1"):

Here are the accessible roles:

  tablist:

  Name "Pages":
  <div
    aria-label="Pages"
    aria-orientation="horizontal"
    id="id-iqb0tk"
    role="tablist"
    variant="graph"
  />

  --------------------------------------------------
  tab:

  Name "Tab 1":
  <button
    aria-controls="id-iqb0tk-3"
    aria-selected="true"
    class="css-vurnku"
    id="id-iqb0tk-1"
    role="tab"
    tabindex="0"
  />

  Name "Tab 2":
  <button
    aria-controls="id-iqb0tk-4"
    aria-selected="false"
    class="css-vurnku"
    id="id-iqb0tk-2"
    role="tab"
    tabindex="-1"
  />

  --------------------------------------------------
  tabpanel:

  Name "Tab 1":
  <div
    aria-labelledby="id-iqb0tk-1"
    id="id-iqb0tk-3"
    role="tabpanel"
    style=""
    tabindex="0"
    variant="graph"
  />

  --------------------------------------------------

<body>
  <div>
    <div
      aria-label="Pages"
      aria-orientation="horizontal"
      id="id-iqb0tk"
      role="tablist"
      variant="graph"
    >
      <div
        class="css-vurnku"
      >
        <button
          aria-controls="id-iqb0tk-3"
          aria-selected="true"
          class="css-vurnku"
          id="id-iqb0tk-1"
          role="tab"
          tabindex="0"
        >
          Tab 1
        </button>
        <button
          aria-controls="id-iqb0tk-4"
          aria-selected="false"
          class="css-vurnku"
          id="id-iqb0tk-2"
          role="tab"
          tabindex="-1"
        >
          Tab 2
        </button>
      </div>
    </div>
    <div
      aria-labelledby="id-iqb0tk-1"
      id="id-iqb0tk-3"
      role="tabpanel"
      style=""
      tabindex="0"
      variant="graph"
    >
      <div>
        Panel 1
      </div>
    </div>
    <div
      aria-labelledby="id-iqb0tk-2"
      hidden=""
      id="id-iqb0tk-4"
      role="tabpanel"
      style="display: none;"
      tabindex="0"
      variant="graph"
    >
      Panel 2
    </div>
  </div>
</body>
TestingLibraryElementError: Unable to find an accessible element with the role "tabpanel" and name `/Panel 1/`

Here are the accessible roles:

  tablist:

  Name "Pages":
  <div
    aria-label="Pages"
    aria-orientation="horizontal"
    id="id-iqb0tk"
    role="tablist"
    variant="graph"
  />

  --------------------------------------------------
  tab:

  Name "Tab 1":
  <button
    aria-controls="id-iqb0tk-3"
    aria-selected="true"
    class="css-vurnku"
    id="id-iqb0tk-1"
    role="tab"
    tabindex="0"
  />

  Name "Tab 2":
  <button
    aria-controls="id-iqb0tk-4"
    aria-selected="false"
    class="css-vurnku"
    id="id-iqb0tk-2"
    role="tab"
    tabindex="-1"
  />

  --------------------------------------------------
  tabpanel:

  Name "Tab 1":
  <div
    aria-labelledby="id-iqb0tk-1"
    id="id-iqb0tk-3"
    role="tabpanel"
    style=""
    tabindex="0"
    variant="graph"
  />

  --------------------------------------------------

<body>
  <div>
    <div
      aria-label="Pages"
      aria-orientation="horizontal"
      id="id-iqb0tk"
      role="tablist"
      variant="graph"
    >
      <div
        class="css-vurnku"
      >
        <button
          aria-controls="id-iqb0tk-3"
          aria-selected="true"
          class="css-vurnku"
          id="id-iqb0tk-1"
          role="tab"
          tabindex="0"
        >
          Tab 1
        </button>
        <button
          aria-controls="id-iqb0tk-4"
          aria-selected="false"
          class="css-vurnku"
          id="id-iqb0tk-2"
          role="tab"
          tabindex="-1"
        >
          Tab 2
        </button>
      </div>
    </div>
    <div
      aria-labelledby="id-iqb0tk-1"
      id="id-iqb0tk-3"
      role="tabpanel"
      style=""
      tabindex="0"
      variant="graph"
    >
      <div>
        Panel 1
      </div>
    </div>
    <div
      aria-labelledby="id-iqb0tk-2"
      hidden=""
      id="id-iqb0tk-4"
      role="tabpanel"
      style="display: none;"
      tabindex="0"
      variant="graph"
    >
      Panel 2
    </div>
  </div>
</body>

var your => (code) => here;
@smblee
Copy link
Author

smblee commented Mar 19, 2021

Posting this in react-testing-library instead. testing-library/react-testing-library#886

@smblee smblee closed this as completed Mar 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@smblee