Repository navigation
Id selector square brackets not escaped correctly #1404
Description
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "11.2.6",
"@testing-library/react-hooks": "5.1.2",
"@testing-library/user-event": "^14.5.2",
"vitest": "^3.0.5",
"react": "17.0.2",
"react-dom": "17.0.2",
node: v20.18.1
Relevant code or config:
<input type="search" class="input" id="artikeltyp.geraetedatenKommunikationsGeraeteKomponententypen[1].anschluss" disabled="" style="anchor-name: --useCSSAnchor-10;" value="" placeholder="Klemmenblock">What you did:
expect(
component.getByPlaceholderText('Klemmenblock'),
).toBeVisible();
What happened:
SyntaxError: 'input#artikeltyp.geraetedatenKommunikationsGeraeteKomponententypen[1].anschluss.input :focus-visible' is not a valid selector
Reproduction:
Problem description:
The id selector square brackets are not escaped by testing library.
Suggested solution:
The id selector square brackets should be escaped by testing library.
Activity
KirtiGautam620 commentedon Nov 16, 2025
Hi! I can reproduce this issue.
I would like to work on implementing the fix (escaping brackets in ID selectors) and adding tests for it.
Please assign this issue to me.
MatanBobi commentedon Nov 16, 2025
I tried reproducing this one but it doesn't look like it reproduces:
https://stackblitz.com/edit/rtl-template-xnwlv3gq?file=src%2FApp.test.tsx,src%2FApp.tsx
@KirtiGautam620 were you able to reproduce it? please share a minimal reproduction.
Please note that you are using RTL version 11 which isn't supported for a few years now.