Id selector square brackets not escaped correctly

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

Use the shown input id and getByPlaceholderText('Klemmenblock') call as the starting case. Trace how the testing library builds the focus-visible selector and verify that square brackets are escaped without breaking existing selector behavior. Done means the call no longer throws a SyntaxError for this id.