Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

getByRole's error message is incorrect on button with role "tab"

See original GitHub issue

DOM Testing Library version: 5.5.0
node version: 13.12.0
npm (or yarn) version: 1.22.4

Relevant code or config:

import React from 'react';
import { render, screen } from '@testing-library/react';

const Button = () => <button role="tab" aria-label="my-button" />;

test('button exists', () => {
  render(<Button />);

  screen.getByRole('button', { name: 'my-button' });
});

What happened:

The test (correctly) failed because it could not find an element with the role of button (the button has a role of “tab”). However, when the error message listed the accessible roles, it listed the button’s role under “button”:

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "my-button"

Here are the accessible roles:

  document:

  Name "":
  <body />

  --------------------------------------------------
  button:

  Name "my-button":
  <button
    aria-label="my-button"
    role="tab"
  />

Reproduction:

Code Sandbox

Problem description:

The current behaviour is confusing because the error message says there is no element with the role of “button” and then shows that there is an element with the role of “button”.

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

kentcdoddscommented, May 13, 2020

🎉 This issue has been resolved in version 7.5.3 🎉

The release is available on:

npm package (@latest dist-tag)
GitHub release

Your semantic-release bot 📦🚀

1reaction

mattstobbscommented, May 8, 2020

It looks like there are actually 2 issues here.

The first is the library aria-query, which we’re using to get a map of the elements to their possible roles. Under elementRoles, the button element only has the role “button”. This would need to be extended to include other roles, such as tab.

The second is that the matches function correctly determines that <button role="tab /> has the role of tab, but currentNode.matches determines the node has the role of button. Do you know where that function is defined?