@testing-library/react version: 16.0.1- Testing Framework and version:
vitest@2.0.5
- DOM Environment:
@testing-library/jest-dom@6.5.0 (6.4.5 also found in our lock file, likely from other deps)
Relevant code or config:
it("RTL example", () => {
const Input = (): JSX.Element => (
<>
<label htmlFor="id--input">Label</label>
<input
type="text"
id="id--input"
aria-describedby="id--error-msg"
/>
<div id="id--error-msg">
<span aria-label="icon_label">icon_name</span>
<span>The error message</span>
</div>
</>
)
const { getByRole } = render(<Input />)
const input = getByRole("textbox", {
description: "icon_label The error message",
})
expect(input).toBeInTheDocument()
})What you did:
Found discrepancy between browser results and unit test using the exact same snippet.
The snippet is a simpler version of our TextField component, where the validation message is prefixed with a font icon with an aria-label.
What happened:
| Browser |
Testing Library |
 |
 |
Reproduction:
See snippet
Problem description:
Not reflective of the real result.
Suggested solution:
@testing-library/reactversion:16.0.1vitest@2.0.5@testing-library/jest-dom@6.5.0(6.4.5also found in our lock file, likely from other deps)Relevant code or config:
What you did:
Found discrepancy between browser results and unit test using the exact same snippet.
The snippet is a simpler version of our TextField component, where the validation message is prefixed with a font icon with an
aria-label.What happened:
Reproduction:
See snippet
Problem description:
Not reflective of the real result.
Suggested solution: