Closed
Description
DOM Testing Libraryversion: 5.5.0nodeversion: 13.12.0npm(oryarn) 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:
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".
Suggested solution:
Buttons with other roles (e.g. tab) should be shown under their correct roles in the error message.
I'm happy to put up a PR for this but would need pointing in the right direction as I'm unfamiliar with the code 😁