Id selector square brackets not escaped correctly

[denniske]

    "@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.

[KirtiGautam620]

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]

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.